滚动时粘性标题跳动

Question

滚动时粘性标题跳动

jqueryhtmlcss

12

我正在创建一个标题，当用户向下滚动一定数量的像素时，它将固定在原位。我的标题高度为121个像素，但我想要固定的部分是标题底部的42个像素; 这确实可以工作，但在它开始固定的那一点上，页面会向上跳大约50个像素。

我认为导致问题的原因是$('#header').css({position: 'fixed'});。我认为一旦应用了fixed，内容div不再考虑边距。我尝试过尝试使用不同的位置，但对我来说没有什么作用。

我创建了一个JSFIDDLE以更好地说明我的问题。

JQUERY CODE

$(window).scroll(function()
{
    if( $(window).scrollTop() > 79 )
    {
        $('#header').css({position: 'fixed'});
    } 
    else 
    {
        $('#header').css({position: 'static', top: '-79px'});
    }
});

CSS 代码

body {
    margin: 0;
    padding: 0;
}
#header {
    width: 100%;
    height: 121px;
    background: url(http://libertyeaglearms.com/dev/admin/graphics/header-bg.png);
}
#content {
    margin: 10px auto;
    width: 300px;
    min-height: 600px;
}

HTML

<div id="header">header</div>
<div id="content">content goes here</div>

- Mike

你有没有注意到当你点击和拖动滚动条而不是使用滚轮时，它工作得很好？对我来说至少是这样...不确定是否会指向一个问题。另外，我正在使用Chrome。此外，它似乎只发生在第一次滚动上。如果我向上滚动再向下滚动它就正常了...这很奇怪。我喜欢处理奇怪的事情 :) - Iron3eagle

嗯，那很奇怪。我正在使用Chrome，但无论哪种方式都会跳跃。 - Mike

我刚刚在固定部分添加了$('#header').css({position: 'fixed', top: '-79px'});，现在似乎已经停止了。 - Iron3eagle

我在固定部分中添加了 top: '-79px'，但对我来说没有任何变化。我相信这是其中一个需要一些小技巧的简单修复方法，哈哈。 - Mike

嗯，非常感谢您在这方面花费的时间。我正在使用WIN7上的Chrome版本28.0.1500.72 m。我也会尝试其他浏览器。 - Mike

显示剩余2条评论

2个回答

0

你可以简单地使用CSS来实现这个效果，像这样：

你只需在CSS中添加以下代码：

header{
position:sticky;
top:0;
z-index:9;
}

- Salman Aziz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harrison · Accepted Answer

问题如下：

当页眉具有“静态”定位时，它会将内容向下推，以避免与其重叠。当定位从“静态”更改为“固定”时，它不再关心是否与内容重叠，因此内容会“跳到”页面顶部，因为它认为没有任何东西阻挡它。

解决此问题的方法有多种：

最简单的方法可能是添加另一个元素，在定位更改时占据页眉所占用的空间。

我通过在页眉为“固定”时将该元素的显示更改为“块”，在页眉为“静态”时将其更改为“无”，来实现此操作。

以下是更新后的 JSFiddle：http://jsfiddle.net/6kPzW/2/

HTML 代码：

<div id="header">header</div>
<div id="header_placeholder"></div>
<div id="content">Content</div>

CSS 代码：

body {
    margin: 0;
    padding: 0;
}
#header {
    width: 100%;
    height: 121px;
    background: url(http://libertyeaglearms.com/dev/admin/graphics/header-bg.png);
}
#content {
    margin: 10px auto;
    width: 300px;
    min-height: 600px;
}
#header_placeholder {
    height:121px;
    width:100%;
    display:none;
}

JQuery代码：

$(window).scroll(function()
{
    if( $(window).scrollTop() > 79 )
{
        $('#header').css({position: 'fixed'});
        $('#header_placeholder').css({display: 'block'});
} 
else 
{
        $('#header').css({position: 'static', top: '-79px'});
        $('#header_placeholder').css({display: 'none'});
}
});