Question

我试图为此页面创建一个类似的效果，如果您转到宣言，当用户滚动时，您会看到左侧的标题为example。当面板结束时，标题然后移开。

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

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

试试这个：

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

2 个答案: