スクロールでナビの位置を上に設定

Question

スクロールの上に位置するようにナビゲーションを設定するには、いくつかのjsのヘルプが必要です。 マイナビマークアップは次のとおりです。

<nav class="flex-nav" id="nav"> 
     <ul> 
     <li><a href="#">Item 01</a></li>... 

私のナビゲーションの現在位置です：私はこれは私がスクロールダウンしたときにトップに設定され、私はの先頭にスクロールしたときに引き離すことにしたい

.flex-nav ul{ 
position: fixed; 
top: 6em; 
width: 100%; 
} 

もう一度ページを開き、6emに戻します。

私はこれを処理するためにjsが必要になると思いますし、またjsでnavを使用するにはidをnavに設定しますか？

-Thanks

Answer 1

onload = _ => { 
    let nav = document.getElementById("nav"); 
    let basePos = nav.offsetTop; 
    setInterval(_ => { 
     nav.style.top = Math.max(0, basePos - scrollY) + "px"; 
    }, 20); 
}; 

これは20ミリ秒毎（approxiametly）を実行し、ここでは要素の位置

Answer 2

を更新し、純粋なJavaScriptで書かれた作業抜粋です：

var body = document.getElementsByTagName('body')[0], 
 
    nav = document.getElementById('nav'); 
 

 
window.addEventListener('scroll', function() { 
 
    if (body.scrollTop > 0) { 
 
    nav.className += " no-indent" 
 
    } else { 
 
    nav.classList.remove("no-indent"); 
 
    } 
 
}, true)

.flex-nav { 
 
    position: fixed; 
 
    top: 6em; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: green; 
 
    transition: all .5s ease-in-out; 
 
} 
 

 
#content { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background-color: gray; 
 
} 
 

 
.no-indent { 
 
    top: 0 !important; 
 
}

<nav class="flex-nav" id="nav"> 
 
</nav> 
 
<div id="content"> 
 
</div>