将导航位置设置为滚动顶部

我需要某些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修改之类的计算昂贵的操作。“您至少应该将元素保存在变量中。 –

将导航位置设置为滚动顶部

回答

相关问题