Question

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

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

我该如何解决这个问题？

提前致谢

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

对于第一个问题：您看到的部分闪光是由于在滚动位置为＆gt;之前不会出现sticky标题的事实。 100.由于default标题的高度为100px，当滚动位置非常宽100px时，两个标题都没有显示。

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

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

编辑我已经更新以使用John Resig在此处发布的技术来解决性能问题：http://ejohn.org/blog/learning-from-twitter/请注意，这会引入250ms的延迟，因此在转换时会有轻微的延迟从默认标题到粘性标题。

Working Demo

$(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中的所有背景都是可靠的。

使用jQuery的scroll将事件绑定到.on()可能会在某些浏览器上变慢。这意味着它不会像它应该那样经常触发，延迟了限制scroll事件的任何函数。此外，由于您正在使用1000ms淡入div，这将使延迟看起来更长。

静态和粘滞固定标头过渡故障

2 个答案: