添加位置后如何防止内容跳转：固定为小标题？

Question

我目前正在研究可以在此处看到的新投资组合：http://katharinakoeth.de/neu/ 而且这已经是我的问题了。正如你所看到的，我为我的小标题添加了一些jquery动作（当我谈到javascript时，我真的是一个初学者）将它的位置从继承改变为固定/粘性......但是当更改发生时，我的内容会跳起来，因为突然的空间。 »对于“我喜欢与之合作的人”这一点最为明显......第一个人在小标题变得粘滞时突然消失。

有没有办法增加额外空间或以其他方式防止跳转？

Answer 1

当您将这些子标题更改为position：fixed时，它们将从文档流中移除。它们有一个边缘底部：75px，当这种情况发生时，它也会从流中移除。

尝试将其更改为margin-top：75px至每个子标题下方块的起始位置;当子标题改变位置值时不会“消失”，所以你的间距应该被保留。

Answer 2

仅供参考，您的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'); 
    }); 

});