javascript - 当到达特定 anchor 时更改 div 的 html 内容

Question

我有一个单页滚动网站，其背景不断变化。我有一个静态页脚，上面写着“向下滚动”，但是当用户到达最后一页/ anchor 时，我希望它消失或说“结束”。

我的代码是我在 Stack Overflow 上找到的其他内容的大杂烩，但这里是:

$(function () {
    $(document).scroll(function () {
        $('.section').each(function () {
            var section = $(this).attr('href');
            if (section === "#4thPage") {
                document.getElementById("scrolldown").innerHTML = "newtext";
                currentSection = section;
            }
        });
    });
});

关于 JS Fiddle:http://jsfiddle.net/charleskh/X5Kqe/13/

谢谢。

Answer 1

该策略是根据视口(viewport)的scrollTop值检查您想要的最后一个感兴趣元素的位置 - 如果scrollTop位置超过该值(即您已滚动超过该元素)，可以使用条件语句，您可以执行您想要的操作:

$(function () {
    // You should consider throttling the firing of the scroll event for better performance
    $(window).scroll(function () {
        // 1. Get position where you want the element to disappear
        //    You should update the selector as you see fit
        // 2. Get scroll position along the y-axis with .scrollTop
        var threshold = $('.section[href*="4thPage"]').offset().top,  // #1
            scrollY = $(window).scrollTop();                          // #2

        // Compare threshold and scrollY
        if(scrollY > threshold) {
            $('#scrolldown').text('newtext');
        }
    });
});

http://jsfiddle.net/teddyrised/X5Kqe/16/