在滚动时将元素粘贴到页面顶部然后将其移除？

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"});
        }
    });
});