到達特定錨點時更改div的html內容

Question

我有一個單頁滾動網站，背景不斷變化。 我有一個靜態頁腳，說“向下滾動”，但當用戶到達最后一頁/錨時，我希望它消失或說'結束'。

我的代碼是我在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回調，而在從> = 100返回到<100之后，它將調用scrollReturn 。

$(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

您需要獲取該錨點的偏移值（頂部），並創建條件以將其與滾動窗口的值進行比較。