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滾動事件不適用於手機

回答

相關問題