添加位置后如何防止内容跳转:固定到子标题?

时间:2011-03-27 03:15:58

标签: javascript jquery header sticky css-position

我目前正在处理您可以在此处看到的新投资组合:http://katharinakoeth.de/neu/ 而且已经存在我的问题了。正如你所看到的,我在我的小标题中添加了一些jquery动作(我真的是javascript的初学者)将其位置从inherit更改为fixed / sticky ..但是当更改发生时,我的内容因为突如其来的空间。 »对于“我喜欢和之合作的人”来说,这是最明显的......第一个人一旦副标题变得粘稠就会突然消失。

有没有办法增加额外空间或以其他方式阻止跳跃?

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

});