每次使用 jQuery 看到某個元素時如何做某事？

Question

現在，每次用戶到達我的頁面底部時，我都會使用以下代碼更新 url hash：

var new_page_value = 1;
$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        new_page_value += 1;
        window.location.hash = 'page-' + new_page_value;
    }
});

當用戶在下面的代碼中滾動到帶有 class “頁面”的任何 div 時，我該如何做同樣的事情？ 例如，如果用戶滾動到第一個視圖中，則 hash 應更新為#page-1，但一旦他們滾動到第二個視圖中，hash 應更新為#page-2，依此類推。 如果他們滾動回到第一個，hash 應該再次更新為#page-1。 基本上 hash 應該根據視圖中的任何 div 進行更新。

<div class="page" data-page-num="1"></div>

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div class="page" data-page-num="2"></div>

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div class="page" data-page-num="3"></div>

Answer 1

此代碼可能有所幫助，但在客戶端可能有點密集。

var new_page_value = 1;
$(window).scroll(function() {
    $(".page").each(function() {
        var position = $(this).position();
        if($(window).scrollTop() == position.top) {
            new_page_value += 1;
            window.location.hash = 'page-' + new_page_value;
        }
    });

    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        new_page_value += 1;
        window.location.hash = 'page-' + new_page_value;
    }
});