Javascriptはスクロールでナビを固定しました - どういう違いがありますか？

Question

スクロールするときに固定ナビゲーションを作成しています。

私はそれを動作させましたが、最初のバージョンが正しく動作しない理由が混乱しています。途中で動きますが、途中でウィンドウの上部にくっついています。

バージョン1（正常に動作していない）

https://jsfiddle.net/9dqabdj5/2/

// Get nav 
var nav = document.querySelector('nav'); 

function navOffsetTop() { 
    if(window.scrollY >= nav.offsetTop) { 
     document.body.style.paddingTop = nav.offsetHeight + 'px'; 
     document.body.classList.add('fixed-top'); 
    } else { 
     document.body.style.paddingTop = 0; 
     document.body.classList.remove('fixed-top'); 
    } 
} 

window.addEventListener('scroll', navOffsetTop); 

バージョン2（ワーキング） - 唯一の違いは、 'offset.Top' では変数です。 バージョン1offsetTopで

https://jsfiddle.net/9kdy0s9n/

// Get nav 
var nav = document.querySelector('nav'); 
var navTop = nav.offsetTop; 

function navOffsetTop() { 
    if(window.scrollY >= navTop) { 
     document.body.style.paddingTop = nav.offsetHeight + 'px'; 
     document.body.classList.add('fixed-top'); 
    } else { 
     document.body.style.paddingTop = 0; 
     document.body.classList.remove('fixed-top'); 
    } 
} 

window.addEventListener('scroll', navOffsetTop); 

Answer 1

0になり、メニューがダウン途中で固定された後に0のまま。したがって、if(window.scrollY >= nav.offsetTop)は、常にtrueに常に出て、nav要素には常にfixed-topを保持します。

バージョン2では、navTopが一度評価され（jsfiddleに〜195pxから始まる）と全体のライフサイクルを通して、その値のままです。これにより、window.scrollYは最終的にnavTop未満になる可能性があるため、elseを実行することができます。

console.log(nav.offsetTop)をnavOffsetTop()に追加し、異なるスクロール距離でoffsetTopの値を参照してください。

うまくいけば助けてください！