スティッキーナビゲーションが表示されたときにページがジャンプします

最初のセクション（全身療法について）にスクロールすると、スティッキーナビゲーションをページに追加しようとしています。スティッキーナビゲーションが表示されたときにページがジャンプします

しかし、できるだけ早くスティッキーナビゲーションが表示されたとして、ページがジャンプします。これは、ナビゲーションバーの「Systemic Psychotherapy」をクリックしたときにページがどこにあるかに影響を与えます。セクションの上部に着陸する代わりに、見出しと最初のいくつかの文章をカバーします。ただし、これはページ上部のをクリックすると発生します。私はウェイポイントを使用してみました

：

$('.js--section-about-st').waypoint(function(direction) { 
    if (direction == "down") { 
     $('nav').addClass('sticky'); 
    } else { 
     $('nav').removeClass('sticky'); 
    } 
});

とjQuery：それは粘着性になったときに

$(window).scroll(function() { 
    if ($(this).scrollTop() > 400){ 
    $('nav').addClass('sticky'); 
    } 
    else{ 
    $('nav').removeClass('sticky'); 
    }

ナビゲーションバーのサイズが減少します。私はこれがページをジャンプさせる原因になることがあるので、私は同じサイズにしておいたが、まだジャンプしていることを読んだ。

誰かが私が間違っている場所で働くのを助けてくれますか？

ありがとうございます！

出典

2017-03-07 Brittany Ell

要素をposition: fixed;にすると、ページのフローから削除されます。つまり、他の要素には影響しません。一度占領された高さはすべて無効になります。 Here is an example of this behavior.

非粘着性のナビゲーションは105pxあるので、それは粘着性になったとき、あなたのナビゲーション後のすべての要素は、そのスペースを占有する105pxを上に移動します。今度は見つからないナビゲーションバーを補うために、同じ105pxをpadding-topとして<body>に適用することを検討してください。 Here is the same example from above, but with the fix now in place.

$(window).scroll(function() { 
    if ($(this).scrollTop() > 400){ 
    $('nav').addClass('sticky'); 
    $('body').css('padding-top', '105px'); //Height of non-stick nav 
    } 
    else{ 
    $('nav').removeClass('sticky'); 
    $('body').css('padding-top', ''); 
    } 
});

出典

2017-03-07 16:26:56 Santi

これは修正されました。ありがとうございました！私はページの流れから除去されているナビゲーションバーについても考えなかった。今、完璧な意味合いがあります。 –

助けてくれてうれしいです。この回答があなたの質問を適切に解決したと思われる場合は、[それを回答として受け入れる]ことを検討してください（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work） – Santi

完了！申し訳ありませんが、私はまだスタックオーバーフローの新しいです！ –

スティッキーナビゲーションが表示されたときにページがジャンプします

答えて

関連する問題