jquery滚动事件不适用于手机

我的网站有问题，我不知道为什么我的代码不适用于手机。我使用了很多像touchmove一样的功能，onscroll但仍然无法工作。即时通讯Jquery初学者。jquery滚动事件不适用于手机

$(window).on("scroll", function() { 
 
    if ($(window).scrollTop() > 325) { 
 
    $(".ONE-DAY-HAWAII-before").addClass("ONE-DAY-HAWAII-after"); 
 
    } else { 
 
    $(".ONE-DAY-HAWAII-before").removeClass("ONE-DAY-HAWAII-after"); 
 
    } 
 
});

*.ONE-DAY-HAWAII-before { 
 
    position: relative; 
 
    z-index: 10; 
 
    transition: .3s ease; 
 
} 
 

 
*.ONE-DAY-HAWAII-after { 
 
    position: fixed; 
 
    top: 46px; 
 
    z-index: 10; 
 
    transition: .3s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ONE-DAY-HAWAII-before"> 
 
    <div class="test1"> 
 
    Scroll Test Drive 
 
    </div> 
 
</div>

，并有可能有使滚动事件对整个网站无法正常工作代码？

来源

2017-07-19 Hari Ng Nepal

只是FYI，你的CSS类不需要'*'前缀。 –

感谢您的信息。 Rory McCrossan –

这里是我的，你需要什么样的建议（我只是略加改变，你的Y偏移值，以适应这个例子的代码片段帧）：

$(document).ready(function() { 
 
    $(window).scroll(function(event) { 
 
    var st = $(window).scrollTop(); 
 
    if (st > 100) { 
 
     $(".ONE-DAY-HAWAII-before").addClass("ONE-DAY-HAWAII-after"); 
 
    } else { 
 
     $(".ONE-DAY-HAWAII-before").removeClass("ONE-DAY-HAWAII-after"); 
 
    } 
 
    }); 
 
});

.ONE-DAY-HAWAII-before { 
 
    position: relative; 
 
    z-index: 1009; 
 
    transition: .3s ease; 
 
    background-color: lavender; 
 
} 
 

 
.ONE-DAY-HAWAII-after { 
 
    position: fixed; 
 
    top: 46px; 
 
    z-index: 1009; 
 
    transition: .3s ease; 
 
    background-color: blanchedalmond; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 

 
<body> 
 
    <div data-role="page" id="page-one"> 
 
    <div data-theme="a" data-role="header" data-position="fixed"> 
 
     <h1>Header</h1> 
 
    </div> 
 
    <div data-role="content"> 
 

 
     <div class="ui-body ui-body-a ui-corner-all"> 
 
     <h3>Title 1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
 
     </div> 
 
     <div class="ONE-DAY-HAWAII-before"> 
 
     <div class="test1"> 
 
      Scroll Test Drive 
 
     </div> 
 
     </div> 
 
     <div class="ui-body ui-body-a ui-corner-all"> 
 
     <h3>Title 2</h3> 
 
     <p>Proin at dolor leo. Duis id vehicula tellus. Donec ornare tincidunt dui sed placerat.</p> 
 
     </div> 
 
     <div class="ui-body ui-body-a ui-corner-all"> 
 
     <h3>Title 3</h3> 
 
     <p>Aenean vel felis volutpat, euismod enim vel, vestibulum justo. Donec accumsan nulla id est faucibus sagittis. Nunc hendrerit finibus sollicitudin. Duis in vestibulum odio. Nulla aliquam, orci sit amet facilisis scelerisque, libero odio vestibulum 
 
      libero, quis imperdiet justo leo sit amet felis. Nam a risus convallis tellus consectetur efficitur a ac erat. Integer eu magna dignissim, luctus ipsum eget, posuere diam. Mauris tellus nibh, fringilla nec pulvinar vitae, accumsan venenatis 
 
      nulla. Maecenas nec lacinia sapien. Proin nec lacus leo. Ut tincidunt ante in nisi vehicula commodo. Mauris vel elit blandit, molestie velit sed, placerat justo. </p> 
 
     </div> 
 
    </div> 
 
    <div data-theme="a" data-role="footer" data-position="fixed"> 
 
     <h1>Footer</h1> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

随意测试它会在您的移动设备上再次询问您是否需要更多解释。

来源

2017-07-19 13:25:42 deblocker

感谢这位deblocker。我可以问一个问题吗？有可能有一个代码，使滚动事件不能在整个网站上工作？像一些外包代码？再次感谢\ m/ –

@HariNgNepal：就这两行而言，你的问题听起来有点模糊......请为此发布一个新问题，并提供尽可能多的信息以获得进一步的帮助。准确地记下你实际在做什么，并明确定义你的目标。 – deblocker

jquery滚动事件不适用于手机

回答

相关问题