web-dev-qa-db-ja.com

スクロール中にスティッキーナビゲーション要素がジャンプする

特にFirefoxでは、修正方法がわからない問題に遭遇しました。

次のページでは、ページを下にスクロールすると数回ジャンプします-主にページがフルサイズで表示されない小さな画面で。ブラウザをページより小さくしてスクロールする必要があるため、この問題を再現できます。

このページにあります： http://www.nucanoe.com/frontier-accessories/

ナビゲーションセレクタでposition:fixedを無効にすると、問題は修正されますが、ナビゲーションを固定する必要があります。これを解決する解決策はありますか？どうにかjQueryを使用する必要があると考えています。

前もって感謝します！

cssscrollsticky
16
Aaron M

あなたが別の答えについて助けを求めているのを見た後、私はあなたのためにより明確に説明しようとします。

問題

問題は、position:fixedをナビゲーションバーに追加すると、その場所から削除され、ページの上部に貼り付けられることです。これが、コンテンツの残りの部分がジャンプアップする理由です-ナビゲーションバーが元の場所にないためです。

修正方法

これを回避するには、ナビゲーション要素を新しいdiv（nav-wrapperと呼びます）でラップし、ナビゲーション要素と同じ高さに設定します。これらはプレースホルダー要素として知られています。この新しいラッパーと元のナビゲーションバーは、「ジャンプ」が消えるために常に同じ高さでなければなりません。

<div class="nav-wrapper" style="height:80px;"> <-- add this

    <div class="your-original-nav" style="height:80px"></div>

</div> <!-- add this

ナビゲーションバーをfixedに設定すると、上部に表示されなくなると、同じ高さで作成した新しいラッパーがページのコンテンツを同じに保ちます。修正されたクラスが削除されると、コンテンツを押し下げることなく、再びラッパーに戻ります。

提案

私があなたのサイトで見ることができるものから、新しい固定ナビゲーションがそのポイントに到達してそれをカバーするまで、ナビゲーションバーがあった大きなギャップがあります。必要なのは、ナビゲーションを修正する場所と非表示にする場所を把握するための小さなjQueryです。私が説明します：

// cache the element
var $navBar = $('.your-original-nav');

// find original navigation bar position
var navPos = $navBar.offset().top;

// on scroll
$(window).scroll(function() {

    // get scroll position from top of the page
    var scrollPos = $(this).scrollTop();

    // check if scroll position is >= the nav position
    if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
    } else {
        $navBar.removeClass('fixed');
    }

});

この例は非常に基本的なものなので、この機能にさらに機能を追加することができます。おそらく、ウィンドウのサイズ変更のオフセットを1つの追加として再計算する必要があります。

デモ

これはあなたを助けるかもしれない小さなデモです -私は退屈し、助けになったと感じました:)

47
TheCarver

この方法で作成しました：navの前に要素を追加しました：

<div class="nav-placeholder"></div>

そして、jquery：

<script type="text/javascript">
    $(document).on("scroll",function(){
        if($(document).scrollTop()>150){
            $(".nav-placeholder").height($(".nav").outerHeight());
        } else {
            $(".nav-placeholder").height(0);
        }
    });
</script>

150まで下にスクロールすると、プレースホルダーはナビゲーションの高さを取得し、再度上にスクロールすると、高さを0に設定します。

ここにフィドルがあります： https://jsfiddle.net/herrfischerhamburg/562wu62y/

2
Henning Fischer

ナビゲーションが修正済みから修正済みに移行する場合、プレースホルダーが必要です。したがって、新しいdivを作成する必要があります。

jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
    jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());


    jQuery(".nav").wrapInner('<div class="nav-inner"></div>');

「.nav」、「nav-inner」、「nav-placeholder」を必要に応じて変更してください。

完全に機能するスティッキーナビゲーションについては、私のWebサイトを確認してください： http://www.swegre.se/

2
SwegreDesigns

私は問題を別様に解決したので、Firefoxではログで確認できるように、それ自体がスクロールアップするので、このスクロールを停止するために簡単なステートメントを作成しました

$(document).ready(function () {
        var header = $('#left-menu');
        var offset = header.offset().top;
        var up = true;
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();
            console.log(scroll + ' ' + offset )
            if (scroll >= offset) {
                header.addClass('sidebar-sticky');
                if (up){
                    $(window).scrollTop(offset);
                    up=false;

                }


            } else {
                up=true;
                header.removeClass('sidebar-sticky');
            }
        });


    });

使用するdivの高さを指定できない場合、そのソリューションは私のために機能します。

0
Aleksy Ruszała