jquery – 滚动粘标题跳

我创建一个标题,当用户向下滚动一定量的像素时,它将粘贴到位.我的标题是121像素高,但是我要粘贴的标题的部分是标题的底部42像素;这是有效的,但是在它开始粘贴页面跳跃约50像素点.

我的想法可能是导致这个问题的是$(‘#header’).css({position：’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>

解决方法

这是问题：

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

这个问题有多种修复方法：

最简单的一个可能是添加另一个元素,这个元素基本上占据了头部在定位更改时所做的空间.

当头是“固定的”,当头是“静态的”时,通过将元素的显示改变为“块”来做到这一点

这是一个更新的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'});
}
});

jquery – 滚动粘标题跳

解决方法

猜你在找的jQuery相关文章