静态和粘滞固定标头转换错误 [英] Static and Sticky fixed header transition misfunction

问题描述

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

I created a sticky header based on scroll even but there are two problems:

1. 当向上和向下滚动时，会跳转到背景。 （我希望你b $ b明白我的意思）


2. 有时两个标题div一起出现。

我该如何解决这个问题？

How can I solve the problem?

提前致谢

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>

推荐答案

对于第一个问题：闪存的一部分你是看到的原因是，在滚动位置> 100之前， sticky 标题才会出现。因为默认标题的高度为100px，当滚动位置非常宽100px时，没有标题显示。

For the first problem: part of the flash you are seeing is due to the fact that the sticky header won't appear until the scroll position is > 100. Since the default header has a height of 100px, when the scroll position is exatly 100px neither header is showing.

您可以通过更改 if（$）来解决此问题。 （文件）.scrollTop（）> 100）到 if（$（document）.scrollTop（）> = 100）。

对于同时显示的两个div的第二个问题，你需要停止当前动画，然后隐藏div。请参阅下文：

For the second issue of both divs showing at the same time, you'll need to stop the current animation before hiding the div. See below:

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

EDIT I've updated to address performance concerns using the techniques John Resig posted here: http://ejohn.org/blog/learning-from-twitter/ Note that this will introduce a 250ms delay, so there will be a slight delay when transitioning from the default header to the sticky header.

工作演示

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

这篇关于静态和粘滞固定标头转换错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！