Javascript 内容保留在粘性标题下_Javascript_Jquery_Html_Css

Javascript 内容保留在粘性标题下
javascript jquery html css
Javascript 内容保留在粘性标题下,javascript,jquery,html,css,Javascript,Jquery,Html,Css,有人能告诉我为什么在向后滚动时，#页面顶部的START仍位于页眉下提前谢谢 CSS： * { margin: 0; padding: 0; } #header, #page, #footer { float: left; display: block; width: 100%; } #header { background: #CCCCCC; } #default { display: block; height: 100px;
有人能告诉我为什么在向后滚动时，
#页面顶部的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;
}

$(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');
        }
    });
});

<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>

JS：
*
{
    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;
}

$(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');
        }
    });
});

<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>

HTML：
*
{
    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;
}

$(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');
        }
    });
});

<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>


我是默认标题
如果滚动位置>100px，则显示“I”
开始


内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



结束
我是页脚

因为您将#标题位置设置为fixed（固定），这正是它所做的。
因为您将#标题位置设置为fixed（固定），这正是它所做的。
位置：fixed（固定）
将元素从网站的标准流中取出，直接放在正文内容的顶部。你们可以通过给身体添加一些填充物来解决这个问题。请参见此处：
位置：fixed
将元素从网站的标准流中移除，直接放在正文内容的顶部。你们可以通过给身体添加一些填充物来解决这个问题。请参见此处：
，因为当您滚动到顶部时，必须将#标题的初始位置设置为0
$(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;
}

$（文档）.ready（函数（）
{
$（窗口）.bind（“滚动”），函数（e）
{
如果（$（文档）.scrollTop（）>=100）
{ 
$（“#标题”）.css（'位置'，'固定'）；
$（“#默认值”）.css（'display'，'none'）；
$（“#sticky”）.css（'display'，'block'）；
}
其他的
{
$（“#sticky”）.css（'display'，'none'）；
$（“#默认值”）.css（'display'，'block'）；
$（“#标题”）.css（'位置'，'固定'）；
}
if（$（文档）.scrollTop（）==0）{
$（“#header”）.css（'position'，'static'）；
}
});
});
我是默认标题
如果滚动位置>100px，则显示“I”
开始


内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



结束
我是页脚
{
保证金：0；
填充：0；
}
#页眉、第页、页脚
{
浮动：左；
显示：块；
宽度：100%；
}
#标题
{
背景:#中交;；
}
#违约
{
显示：块；
高度：100px；
背景#64D989；
}
#粘的
{
显示：无；
高度：50px；
背景：#D9D164；
}
#页脚
{
背景：#EEEEEE；
}

因为当您滚动到顶部时，必须将#标题的初始位置设置回原来的位置：0
$(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;
}

$（文档）.ready（函数（）
{
$（窗口）.bind（“滚动”），函数（e）
{
如果（$（文档）.scrollTop（）>=100）
{ 
$（“#标题”）.css（'位置'，'固定'）；
$（“#默认值”）.css（'display'，'none'）；
$（“#sticky”）.css（'display'，'block'）；
}
其他的
{
$（“#sticky”）.css（'display'，'none'）；
$（“#默认值”）.css（'display'，'block'）；
$（“#标题”）.css（'位置'，'固定'）；
}
if（$（文档）.scrollTop（）==0）{
$（“#header”）.css（'position'，'static'）；
}
});
});
我是默认标题
如果滚动位置>100px，则显示“I”
开始


内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



内容



结束
我是页脚
{
保证金：0；
填充：0；
}
#页眉、第页、页脚
{
浮动：左；
显示：块；
宽度：100%；
}
#标题
{
背景:#中交;；
}
#违约
{
显示：块；
高度：100px；
背景#64D989；
}
#粘的
{
显示：无；
高度：50px；
背景：#D9D164；
}
#页脚
{
背景：#EEEEEE；
}

您可以在下面添加css并使其正常工作
#page
{
    padding-top: 100px;
}

您可以在下面添加css并使其工作
#page
{
    padding-top: 100px;
}

一开始看起来不难看吗？嗯，是的。。。我想position:fixed
应该从一开始就添加到#头中，而不是依赖jQuery来完成。一开始看起来不难看吗？嗯，是的。。。我想position:fixed
应该从一开始就添加到#头中，而不是依赖jQuery来完成。