我正在尝试在第一个主页横幅下编写辅助导航,并在滚动时固定 header 。
示例:www.neffassociates.com(请稍微向下滚动)
最佳答案
- 监听窗口滚动事件
- 检查你的导航栏是否在顶部
我给你做了一个例子,它会给你一个想法 pen link
代码笔中的示例:
var navbar = document.querySelector('.navbar').getBoundingClientRect();
var isSticky = false;
window.addEventListener('scroll', function() {
var s = window.scrollY;
var navbarCls = 'navbar--fixed';
var nextEl = document.querySelector('.navbar + *');
if (s >= navbar.top) {
nextEl.style.paddingTop = navbar.height + "px";
document.body.classList.add(navbarCls);
isSticky = true;
} else if(s < navbar.top && isSticky) {
document.body.classList.remove(navbarCls);
isSticky = false;
nextEl.removeAttribute('style');
}
})
关于javascript - 主页横幅下方的二级导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55081102/