シングルページのナビゲーションでインデントをマイナスします

Question

私はJavascript/Jqueryの初心者ですから、私のコードと私の質問に恵まれていることを本当に願っています。

私の例にアクセスし、セクションリンクをクリックしてください。 上部のセクションが少しインデントされていることがわかります（インスペクタを使用することもできます）。私はそれがヘッダーの変更に依存すると思う。

2回目をクリックすると、位置が正しいことになります。つまり、ヘッダーのスタイルが既に切り替えられている場合は、もう問題はありません。

Example on codepen.io

$(document).ready(function() { 

//

$（文書）.on（ 'クリック'、 'A'、機能（イベント）{ event.preventDefault（）スクロールスムーズアンカー;

を

$('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 

}）;

//スティッキーナビゲーション
var stickyNavTop = $（ '。sticky-navi'）。offset（）。top;

var stickyNav = function(){ 
var scrollTop = $(window).scrollTop(); 

if (scrollTop > stickyNavTop) { 
    $('.sticky-navi').addClass('sticky'); 
} else { 
    $('.sticky-navi').removeClass('sticky'); 
} 
}; 

stickyNav(); 

$(window).scroll(function() { 
    stickyNav(); 
}); 

}）。

誰かが私のための解決策を持っていますか...どうか... :)？

Answer 1

これは競合状態のために発生します。あなたがスクロールするためにオフセットされると、まだスティッキーではなく、ページトップにスティックされたときにスクロールダウンしながら条件が変化するので、リンクをスクロールするのに必要なオフセットが無効になります。あなたはそれを補う必要があります。

var nav = $('.sticky-navi'); 
var oft = nav.hasClass('sticky') ? 0 : nav.height(); 
$('html, body').animate({ 
    scrollTop: $($.attr(this, 'href')).offset().top - oft 
}, 500); 

それは粘着性がないときにこれが何を行うことはNAVの高さを減算しています。これは、スクロール中にnavがページ上部に固着することがわかっているからです。すでに粘着性がある場合は、何もする必要はありません。