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

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

<小时/>

更新

我已经构建了一些更接近我需要的东西，但是我遇到的问题是，当您向下滚动到下一部分时，我希望第一部分中的标题粘贴在父级的底部in - 这有意义吗？这是一个示例 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"});
        };

    });

});