在滾動時將元素粘貼到頁面頂部然后將其移除？

Question

我正在嘗試為此頁面創建類似的效果，如果您轉到宣言，您會看到左側的標題在用戶滾動時粘貼示例 。 當面板結束時，標題然后移開。

我想用3個面板做這個，我不確定如何去做，而且我寫的JS ive沒有應用任何東西

https://jsfiddle.net/HV9HM/5906/

var stickyTop = $('h2').offset().top;

$(window).on( 'scroll', function(){
        if ($(window).scrollTop() >= stickyTop) {
            $('h2').css({position: "fixed", top: "0px"});
        } else {
            $('h2').css({position: "relative", top: "0px"});
        }
    });

---

更新

我已經建立了一些更接近我需要的東西，但我遇到的問題是，當你向下滾動到下一部分時，我希望第一部分中的標題粘在父母的底部 - 在這有道理嗎？ 下面是一個例子jsfiddle.net/HV9HM/5910

Answer 1

您需要將代碼放在ready函數中，因為您正在嘗試訪問未完全加載的元素，這就是為什么在檢查控制台時出現錯誤的原因。

$(function(){ // need this ready function

    var stickyTop = $('h2').offset().top;

    $(window).on( 'scroll', function(){

        if ($(window).scrollTop() >= stickyTop) {
            $('h2').css({position: "fixed", top: "0px"});
        } else {
            $('h2').css({position: "relative", top: "0px"});
        };

    });

});

Answer 2

嘗試這個：

$(function(){
 var stickyTop="";
 $(window).on( 'scroll', function(){
        if ($(window).scrollTop() >= stickyTop) {
             stickyTop = $('h2').offset().top;
            $('h2').css({position: "fixed", top: "0px"});
        } else {
           stickyTop = $('h2').offset().top;
            $('h2').css({position: "relative", top: "0px"});
        }
    });
});