jquery - 静态和粘性固定标头转换错误功能

Question

我甚至创建了一个基于滚动的粘性标题，但有两个问题：

1. 上下滚动时，背景有跳跃。（我希望你明白我的意思）
2. 有时两个标题 div 一起出现。

我该如何解决这个问题？

提前致谢

JSFiddle 演示

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', 'relative');
            $("#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>

Answer 1

对于第一个问题：您看到的部分 flash 是由于sticky标题在滚动位置 > 100 之前不会出现。由于default标题的高度为 100px，当滚动位置为 100px 时，标题都不会出现正在显示。

您可以通过更改为来解决此if ($(document).scrollTop() > 100)问题if ($(document).scrollTop() >= 100)。

对于两个 div 同时显示的第二个问题，您需要在隐藏 div 之前停止当前动画。见下文：

编辑我已经更新以使用 John Resig 在此处发布的技术解决性能问题：http ://ejohn.org/blog/learning-from-twitter/请注意，这将引入 250 毫秒的延迟，因此当从默认标题过渡到粘性标题。

工作演示

$(document).ready(function () {
    var sticky = $('#sticky'),
        defaultHeader = $('#default'),
        header = $('#header')
        defaultShowing = true,
        didScroll = false;

    $(window).on("scroll", function (e) {
        didScroll = true;
    });

    window.setInterval(function () {
        if(didScroll) {
            didScroll = false;
            var scrollTop = $(document).scrollTop();

            if (defaultShowing && scrollTop >= 100) {
                defaultShowing = false;
                header.css('position', 'fixed');
                defaultHeader.stop().hide();
                sticky.fadeIn(1000);
            } else if (!defaultShowing && scrollTop < 100) {
                defaultShowing = true;
                header.css('position', 'relative');
                sticky.stop().hide();
                defaultHeader.fadeIn(1000);
            }
        }
    }, 250);
});

Answer 2

不确定背景是什么意思，因为您显示的 CSS 中的所有背景都是实心的。

在某些浏览器上，将事件scroll与 jQuery绑定.on()可能会变慢。这意味着它不会像应有的那样频繁触发，延迟任何绑定滚动事件的函数。此外，由于您要1000ms淡入 div，这会使延迟看起来更长。