12

我正在创建一个标题，当用户向下滚动超过一定数量的像素时，它会固定在适当的位置。我的标题是 121 像素高，但我要粘贴的标题部分是标题的底部 42 像素；这确实有效，但在它开始粘住页面时，页面会跳升约 50 像素。

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

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

查询代码

$(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>
4

2 回答 2

30

这是问题所在：

当标头具有“静态”定位时，它会将内容向下推，使其不与内容重叠。当定位从“静态”变为“固定”时，它不再关心它是否与内容重叠，因此内容“跳”到页面顶部，因为它认为没有任何东西在它的方式中。

这个问题有多个修复：

最简单的可能是添加另一个元素，该元素基本上占用了标题在定位更改时所做的空间。

我通过在标题为“固定”时将元素的显示更改为“块”和当标题为“静态”时将元素的显示更改为“无”来做到这一点

这是一个更新的 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'});
}
});
于 2013-07-24T19:16:04.067 回答
0

您可以简单地为此使用 css：

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

于 2021-09-22T13:31:19.653 回答