將導航位置設置爲滾動頂部

我需要某些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來處理這個問題，並且還要在導航上設置一個id來在js中使用它？

-Thanks

來源

2017-07-29 user2371684

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

這每20毫秒（approxiametly）和更新的元素位置

來源

2017-07-29 23:16:52

這裏是工作的代碼段寫在純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>

來源

2017-07-29 23:24:13

謝謝:)我想那個.no-ident將位置設置爲頂部：0當滾動大於0時，否則不使用它。但是在標記中我沒有看到.no-ident？那麼，那沒必要呢？ – user2371684

@ user2371684，是的，你是對的。此類不在HTML代碼中，因爲它通過Javascript應用於此行：'document.getElementById（'nav'）。className + =「no-indent」'。它的應用和刪除基於從頂部滾動像素：「如果scrollTop> 0」 - 添加類，「如果scrollTop === 0」 - 刪除類 –

MDN說：「由於滾動事件可以高速率觸發事件處理程序不應該執行諸如DOM修改之類的計算昂貴的操作。「您至少應該將元素保存在變量中。 –

將導航位置設置爲滾動頂部

回答

相關問題