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

【问题标题】：How to prevent content jump after adding position:fixed to subhead?添加位置后如何防止内容跳转：固定到副标题？
【发布时间】：2011-12-09 00:41:17
【问题描述】：

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

有什么方法可以增加额外的空间或以其他方式阻止跳转？

【问题讨论】：

标签： javascript jquery header sticky css-position

【解决方案1】：

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

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

【讨论】：

【解决方案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');
    });

});

【讨论】：

谢谢你，Marcel，我稍后试试。
@Doretta Dunstrøm：另一个仅供参考，它未经测试，因此可能需要一些调整。