固定在副標題上后，如何防止內容跳躍？

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

});