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

Question

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

我想用 3 个面板来做这件事，我不确定如何去做，而我写的 JS 没有应用任何东西

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