Question

我有一个单页滚动网站，背景不断变化。我有一个静态页脚，说“向下滚动”＃39;但当用户到达最后一页/锚点时，我希望它消失或说“结束”。

我的代码是我在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小提琴：http://jsfiddle.net/charleskh/X5Kqe/13/

谢谢。

Answer 1

策略是根据视口的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/

Answer 2

可能有点矫枉过正，但最近我做了类似的事情，看到这篇文章我受到启发，将其重写为插件。

以下是插件（底部的示例）：

function isFunction(f) {
    var getType = {};
    return f && getType.toString.call(f) === '[object Function]';
}

$.prototype.scrollPosition = function(topPos, options) {
    var self = this;
    $(document).on('scroll', function() {
        var yPos = isFunction(topPos) ? topPos.call(this) : topPos;

        if($(this).scrollTop() > yPos) {
             if(isFunction(options.scrollPast) &&
               (typeof(this.lastScrollTop) === "undefined" || this.lastScrollTop <= yPos))
                options.scrollPast.call(self);
        }
        else if(isFunction(options.scrollReturn) &&
               (typeof(this.lastScrollTop) === "undefined" || this.lastScrollTop > yPos))
            options.scrollReturn.call(self);

        this.lastScrollTop = $(this).scrollTop();
    });
}

$.prototype.scrollAt = function(options, includeMargins) {
    var self = this;
    $(this).scrollPosition(function() {
        var topPos = $(self).offset().top;
        if(includeMargins)  {
            topPos -= parseInt($(self).css('margin-top'));
        }
        return topPos;
    }, options);
}

$.prototype.scrollPast = function(options, includeMargins) {
    var self = this;
    $(this).scrollPosition(function() {
        return $(self).offset().top + $(self).outerHeight(includeMargins);
    }, options);
}

<强>实施例

在下面的示例中，当您超过y坐标100时，它会调用scrollPast回调，而在来自＆gt; = 100之后调用scrollReturn回到＆lt; 100。

$(element).scrollPosition(100, {
    scrollPast: function() {
        console.log("REACHED", $(this));
    },
    scrollReturn: function() {
        console.log("BEFORE", $(this));
    }
});

您也可以使用返回位置的函数回调，代替固定位置（在前面的示例中为100）。在下面的例子中展示了元素实际位置，尽管它发生了变化。

$(element).scrollPosition(function() {
    return $(this).offset().top;
}, {callbacks etc...});

同样，两个实现.scrollAt和.scrollPast正在使用此方法。 .scrollAt在元素即将逃离屏幕时生效（可选择考虑边距），而.scrollPast在屏幕外时生效（边距也可选）。示例用法（两者的参数相同）：

$(element).scrollPast({
    scrollPast: function() {
        console.log("REACHED", $(this));
    },
    scrollReturn: function() {
        console.log("BEFORE", $(this));
    }
}, true);

对于所有这些实现，回调名称始终为scrollPast。因此，.scrollAt看起来像这样：

$(element).scrollAt({
    scrollPast: function() {
        console.log("REACHED", $(this));
    },
    scrollReturn: function() {
        console.log("BEFORE", $(this));
    }
}, true);

Answer 3

您需要获取该锚点的偏移值（顶部），并创建条件以将其与滚动窗口的值进行比较。

到达特定锚点时更改div的html内容

3 个答案: