2

スクロールに基づいてスティッキー ヘッダーを作成しましたが、2 つの問題があります。

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

2 に答える 2

3

最初の問題: 表示されているフラッシュの一部はsticky、スクロール位置が > 100 になるまでヘッダーが表示されないdefaultという事実によるものです。示しています。

if ($(document).scrollTop() > 100)に変更することでこれを修正できますif ($(document).scrollTop() >= 100)。

両方の div が同時に表示される 2 番目の問題については、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);
});
于 2013-06-11T11:45:21.133 に答える
2

あなたが示すCSSのすべての背景は無地であるため、背景の意味がわかりません.

イベントをscrolljQueryにバインドする.on()と、一部のブラウザーで遅くなることがあります。つまり、スクロールイベントにバインドされた関数を遅らせて、必要な頻度で起動しないことを意味します。また、1000msdiv でフェードインしているため、遅延が長く見えるようになります。

于 2013-06-11T11:42:08.513 に答える