Javascript 将元素粘贴到滚动页面的顶部，然后将其移出？

我正在尝试创建一个与此页面类似的效果，如果您转到宣言，当用户滚动时，您将看到左侧的标题。当面板位于末尾时，标题将移开

我想用3个面板来做这件事，我不知道怎么做，我写的JS没有应用任何东西

---

更新

---

我已经建立了一些更接近我需要的东西，但是我的问题是，当你向下滚动到下一节时，我希望第一节中的标题贴在父节的底部-这有意义吗？下面是一个示例jsfiddle.net/HV9HM/5910

您需要将代码放入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"});
        };

    });

});

---

您需要将代码放入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"});
        };

    });

});

试试这个：

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

试试这个：

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

---

是的，这是一个错误问题，但是这并不能解决上的固定和相对问题scroll@Nicholas他的代码完全按照它所说的做，但问题是他在HTML中有多个

h2

标记，因此JS不知道该关注哪一个。他应该重做HTML，这样它才可行。事实上，我的错。谢谢@AmericanSlime，不是我想要的，但谢谢你的建议。我已经建立了一些更接近我需要的东西，但是我的问题是，当你向下滚动到下一节时，我希望第一节中的标题贴在父节的底部-这有意义吗？这里有一个例子是的，这是一个错误的问题，但这并不能解决固定和相对的问题scroll@Nicholas他的代码完全按照它所说的做，但问题是他在HTML中有多个

h2

标记，因此JS不知道该关注哪一个。他应该重做HTML，这样它才可行。事实上，我的错。谢谢@AmericanSlime，不是我想要的，但谢谢你的建议。我已经建立了一些更接近我需要的东西，但是我的问题是，当你向下滚动到下一节时，我希望第一节中的标题贴在父节的底部-这有意义吗？下面是一个例子，我已经更新了我的问题@miguelmachado-我现在已经让它工作得更好了，但它仍然不正确。在每个h2元素存储中添加一个自定义属性true for is on top，并创建一个函数，该函数为粘贴到顶部的每个元素在每个标题顶部添加填充量。。你能理解吗？我在打电话，所以我现在帮不了什么忙。我已经更新了我的问题@miguelmachado-我现在让它工作得更好了，但它仍然不正确。在每个h2元素存储中添加一个自定义属性true for is on top，并创建一个函数，为粘贴到顶部的每个元素在每个标题顶部添加填充量。。你能理解吗？我在打电话，所以我现在帮不了什么忙。