jQuery：在視口選擇器精度

Question

我有一個容器，內有多個<div> s，代表頁面。當用戶滾動瀏覽這些頁面時，我想更新當前頁碼標籤。爲了達到這個目的，我發現我可以使用:in-viewport選擇器。我嘗試以下這個example，以及與此的jsfiddle想出了：

http://jsfiddle.net/j2aet/

這似乎是工作，但我確實有它的一個小問題。這是我向下滾動時，我的當前頁碼不會更改爲「2」，直到第二個「圖像」元素部分隱藏（頂部），並且頁面3部分可見。我希望它早點改成2。看到這個屏幕截圖我的意思，這是當它改變爲「2」：理想

http://imgur.com/l40ddBs

，我想當前頁碼儘快改變爲「2」作爲第二屆「形象「元素是具有多數意見的元素。例如，這可能是我想當前頁碼更改爲「2」的位置：

http://imgur.com/uKZRD4m（注意＃2是怎麼多數視圖）

而且似乎得到當我繼續滾動時更糟糕。在下一張截圖中，當前頁碼仍然顯示爲5，但第5張圖像根本無法看到！

http://imgur.com/tr10aoU

有什麼不同，我可以做才能達到這種效果呢？現在，我只是用in:viewport選擇結合了:first選擇：

$('.item:in-viewport:first') 

Answer 1

這裏是我結束了去：

$container.on('scroll', function() { 
    // for each item in viewport, which one is in view the MOST? 
    var diff = null; 
    var num; 
    $('.item:in-viewport').each(function(){ 
     var thisPage = $(this).attr("page"); 
     var thisTop = $(this).position().top; 

     if(diff == null){ 
      diff = Math.abs(containerTop - thisTop); 
      num = thisPage; 
     } else { 
      var temp = Math.abs(containerTop - thisTop); 
      if(temp < diff) { 
       diff = temp; 
       num = thisPage; 
      } 
     } 
    }); 
    diff = null; 
    $cp.html(num); 
}); 

http://jsfiddle.net/j2aet/1/

我仍然能夠使用:in-viewport選擇，而不是將其與:first選擇相結合，我只是循環通過每個項目查看並找出哪一個最接近容器的頂部。可能有更有效的方法來做到這一點，但現在這會起作用。

更新（性能）：

繼的想法，我發現here，我們可以選擇只更新頁碼用戶已完成滾動至少半秒鐘後：

$container.on('scroll', function() { 
    if(this.scrollTo) clearTimeout(this.scrollTo); 
    this.scrollTo = setTimeout(function() { updatePageNumber();}, 500); 
}); 

function updatePageNumber(){ 
    // for each item in viewport, which one is in view the MOST? 
    var diff = null; 
    var num; 
    $('.item:in-viewport').each(function(){ 
     var thisPage = $(this).attr("page"); 
     var thisTop = $(this).position().top; 

     if(diff == null){ 
      diff = Math.abs(containerTop - thisTop); 
      num = thisPage; 
     } else { 
      var temp = Math.abs(containerTop - thisTop); 
      if(temp < diff) { 
       diff = temp; 
       num = thisPage; 
      } 
     } 
    }); 
    diff = null; 
    $cp.html(num); 
} 

http://jsfiddle.net/j2aet/2/

Answer 2

這裏有一個方法，你可以檢查每個項目的位置，因爲他們向上滾動嘗試。 這不是完美的，它是更多的代碼，但希望這將有助於給你一些想法。

這裏是fiddle的例子，下面是代碼。

$container.off('scroll').on('scroll', function() { 
    var top = $(this).offset().top; 

    $(".item").each(function() 
    { 
     var itemTop = $(this).offset().top; 
     var itemBottom = $(this).offset().top + $(this).height(); 
     if(itemTop >= (top + 25) && itemTop <= (top + 50)) 
      $cp.html($(this).attr("page")); 
     else if(itemBottom >= (top + 400) && itemBottom <= (top + 425)) 
      $cp.html($(this).attr("page")); 

    }); 
});