3

私は現在、ウェブサイトの粘着性のあるナビゲーションに取り組んでおり、ナビゲーションがposition:fixedジャンプするように見えて「ぎこちなく」見えるようになると、いくつかの問題に直面しています。

http://jsfiddle.net/DKtLR/

理想的には、ユーザーがスクロールし、ナビゲーションがビューポートからスクロールされるまで固定位置になく、その後固定されてスライドしてビューに戻るという結果になります。

4

4 に答える 4

2

ビューポートから完全に外れたときにのみ固定する必要があるため、スライドインし、topプロパティを変更してからアニメーション化してビューに戻します。実際の例については、このフィドルを参照してください。

アップデート

この更新されたフィドルは、まだ適用されていない場合にのみ動作を適用し、通常の「静的」位置に戻るときに動的スタイルを完全に削除するため、より適切に機能するはずです。

上にスクロールするとまだちらつきがあることに注意してください。これは、ナビゲーションが固定位置から静的位置に「ジャンプ」するためです。これは、上のアニメーションと同様の手法を使用して簡単に解決できます。

于 2012-07-18T10:11:09.970 に答える
1

StickyScroller jquery プラグインを使用するだけです: http://vertstudios.com/blog/jquery-sticky-scroller-position-fixed-plugin/

于 2012-07-18T12:57:01.317 に答える
0

私はこのソリューションに基づいてこの代替ソリューションを作成しました。機能に基づきsetIntervalます（コンソールログも参照）。

var interval_id = false;
var curOffset, oldOffset;
var altmenu;
$(document).ready(function(){
    altmenu = $('.top-nav')[0].cloneNode(true);
    altmenu.style.position = 'absolute';
    altmenu.style.display = 'none';
    document.body.appendChild(altmenu);
    oldOffset = $(window).scrollTop();
    $(document).bind('scroll',function(){
        if (interval_id) {
            return;
        }
        //altmenu.style.display = 'none'; // optional
        interval_id = setInterval(function() {
            curOffset = $(window).scrollTop();
            if(curOffset == oldOffset) {
                console.log('scrolling stopped',curOffset);
                clearInterval(interval_id);
                interval_id = false;
                if (curOffset>120) {
                    altmenu.style.display = 'block';
                } else {
                    altmenu.style.display = 'none';
                }
                $(altmenu).css({
                    top: (curOffset-120)+'px'
                }).animate({
                    top: (curOffset)+'px'
                }, 500);
            }
            oldOffset = curOffset;
        }, 500); //setInterval
    });//scroll
});//ready

テストスクリプトとjsfiddleはこちらです。

于 2012-07-18T12:46:02.487 に答える
0

上部にアニメーションで修正して、不格好にならないようにします

これは、ビューからスクロールしたときに固定のメニュー バーを提供するため、あなたが探しているソリューションかもしれませんが、上から固定に切り替えると、スライド ダウン アニメーションを実行するため、説明したように感じません。それは不格好です。

例で使用した HTML (簡略化):

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        ...
    </ul>
</div>
<div id="content" />

CSSはもちろんシンプルです（関連するスタイルのみ）

#menu {
    position: absolute;
    width: 100%;
}
#menu.out {
    position: fixed;
}
#menu ul {
    margin: 0;
    list-style: none;
}
#menu ul li {
    display: inline-block;
}

そして、それを実行し、非常に迅速に実行するスクリプト (最も遅い部分はブラウザのネイティブ関数の呼び出しであるため、可能な限り高速に実行されgetBoundingClientRect()ます。つまり、それでも非常に高速であることを意味します)。

$(function() {

    // save element references for faster execution
    var menu = $("#menu");
    var ul = menu.find("ul");
    var content = $("#content")[0];

    // get menu actual height
    var menuHeight = menu[0].getBoundingClientRect().bottom;

    // detect whether menu is scrolled out
    var inView= true;

    $(document).scroll(function(evt) {
        evt.preventDefault();

        var top = content.getBoundingClientRect().top;
        var nextInView = (top + menuHeight) > 0;

        // did state change so we have to change menu positioning
        if (inView ^ nextInView)
        {
            inView = nextInView;
            if (inView)
            {
                menu.removeClass("out");
            }
            else
            {
                menu.addClass("out");
                ul.hide().slideDown("fast");
            }
        }
    });

});

で、これです。アニメーションの前にメニューを配置する必要があるビューポートの上のピクセル数を正確に把握しながら、トップスタイルプロパティをアニメーション化することによりslideDown()、アニメーションを微調整することもできます。slide in

ページをスクロールしてメニューが表示されなくなると、メニューが固定位置に切り替わり、メニューが下にスクロールされるため、表示にジャンプするだけでなく、スムーズに元に戻ります。

于 2012-07-18T12:59:12.933 に答える