javascript - 内容保留在粘性标题下

谁能告诉我为什么向上滚动时#page读取START的顶部仍保留在标题下？

提前致谢

CSS：

*
{
    margin: 0;
    padding: 0;
}
#header, #page, #footer
{
    float: left;
    display: block;
    width: 100%;
}
#header
{
    background: #CCCCCC;
}
#default
{
    display: block;
    height: 100px;
    background: #64D989;
}
#sticky
{
    display: none;
    height: 50px;
    background: #D9D164;
}
#footer
{
    background: #EEEEEE;
}

JS：

$(document).ready(function ()
{
    $(window).bind("scroll", function (e)
    {
        if ($(document).scrollTop() >= 100)
        {
            $("#header").css('position', 'fixed');
            $("#default").css('display', 'none');
            $("#sticky").css('display', 'block');
        }
        else
        {
            $("#header").css('position', 'fixed');
            $("#sticky").css('display', 'none');
            $("#default").css('display', 'block');
        }
    });
});

HTML：

<div id="header">
    <div id="default">I AM DEFAULT HEADER</div>
    <div id="sticky">I APPEAR IF SCROLL POSITION > 100px</div>
</div>

<div id="page">
        START<br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        END
</div>

<div id="footer">I AM PAGE FOOTER</div>

jsFiddle

最佳答案

因为滚动到top：0时必须让#header的初始位置退回

$(document).ready(function ()
{
    $(window).bind("scroll", function (e)
    {
        if ($(document).scrollTop() >= 100)
        {
            $("#header").css('position', 'fixed');
            $("#default").css('display', 'none');
            $("#sticky").css('display', 'block');
        }
        else
        {
            $("#sticky").css('display', 'none');
            $("#default").css('display', 'block');
            $("#header").css('position', 'fixed');
        }
        if($(document).scrollTop() == 0){
            $("#header").css('position', 'static');
        }
    });
});

<div id="header">
    <div id="default">I AM DEFAULT HEADER</div>
    <div id="sticky">I APPEAR IF SCROLL POSITION > 100px</div>
</div>

<div id="page">
        START<br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        CONTENT<br /><br /><br />
        END
</div>

<div id="footer">I AM PAGE FOOTER</div>

{
    margin: 0;
    padding: 0;
}
#header, #page, #footer
{
    float: left;
    display: block;
    width: 100%;
}
#header
{
    background: #CCCCCC;
}
#default
{
    display: block;
    height: 100px;
    background: #64D989;
}
#sticky
{
    display: none;
    height: 50px;
    background: #D9D164;
}
#footer
{
    background: #EEEEEE;
}

fiddle