jquery檢測用戶是否滾動到移動設備的某個點

我在移動設備上有一個固定的位置菜單，當用戶滾動到不同的部分菜單條目必須更改。到目前爲止，我使用的是這樣的：jquery檢測用戶是否滾動到移動設備的某個點

 if (scroll >= 860) { 
      $('#menu_link_1').show(); 
     }else{ 
      $('#menu_link_1').hide(); 
     } 

     if (scroll >= 1300) { 
      $('#menu_link_2').show(); 
     }else{ 
      $('#menu_link_2').hide(); 
      $('#menu_link_1').show(); 
     }

但隨着高度可以在每一個移動設備，這是不準確的不同，可有人告訴我其他的方式來改變它，如果滾動已經達到不能根據某個點請html的高度。

來源

2014-04-29 novoa

' window.scrollTop/window.height === number_of_screens_scrolled'？ – adeneo

只是一件事，並不是所有的屏幕都有相同的高度。對不起，我不確定要了解 – novoa

adeneo的答案有什麼問題，IT完美 –

而不是使用滾動位置，你可以檢查看看哪個元素在視圖中。下面的例子可能是有用的 - 它是一個有點亂，但它說明了如何讓你的頁面的每個「屏幕」的位置，並確定其是否在視圖：

function testInView($el){ 
    var wTop = $(window).scrollTop(); 
    var wBot = wTop + $(window).height(); 
    var wMid = wBot - ($(window).height()/2); 
    var eTop = $el.offset().top; 
    var eBot = eTop + $el.height(); 
    return (((eTop <= wMid) && (eBot >= wMid))); 
} 
function setInView(){ 
    $(".inview").removeClass("inview"); 
    $("div.screen").each(function(){ 
     var $zis = $(this); 
     if(testInView($zis)){ 
      $zis.addClass("inview"); 
      $("a[href='#"+$zis.attr("id")+"']").addClass("inview"); 
     } 
    }); 
} 
$(document).on('ready scroll resize touchmove',setInView);

演示：http://jsfiddle.net/64y6N/

來源

2014-04-29 16:24:38 Moob

好而高效，但我會使用'.on（）'調用所有事件：'$（document）.on（'ready滾動resize touchmove'，setInView）;' – agrm

@AndersG是的，這是更乾淨。相應地更新我的答案。 – Moob

jquery檢測用戶是否滾動到移動設備的某個點

回答

相關問題