javascript - 添加位置后如何防止内容跳转：固定到副标题？

Question

我目前正在研究我的新作品集，你可以在这里看到：http: //katharinakoeth.de/neu/ 我的问题已经出现了。如您所见，我在子标题中添加了一些 jquery 操作（我真的是 javascript 的初学者）以将其位置从继承更改为固定/粘性.. 但是当更改发生时，我的内容会因为突如其来的空间。» 最明显的是“我喜欢与之共事的人”……当副标题变得粘稠时，第一个人突然消失了。

有没有办法增加额外的空间或以另一种方式防止跳跃？

Answer 1

仅供参考，您的fix.js文件可能会重构为以下内容：

var $titles = $("header h2");
$(window).scroll(function(){

    var win_top = $(this).scrollTop();
    $titles.each(function(){
        var div_top1 = $(this).offset().top;
        if (win_top > div_top) $(this).addClass('stick')
        else $(this).removeClass('stick');
    });

});

Answer 2

当您将这些子标题更改为 position:fixed 时，它们将从文档流中删除。它们有一个 margin-bottom: 75px ，发生这种情况时也会从流中删除。

尝试将其更改为 margin-top:75px 到每个子标题下方块的开头；当子标题更改位置值时，它不会“消失”，因此应该保留您的间距。