[英]Bottom aligned navigation stick to top on scroll
我有一个固定的导航,我以前用来在您向上或向下滚动以及到达页面顶部时隐藏和显示。 在此处查看一个工作示例。
但是我正在努力调整它,以便在导航位于页面底部时它可以工作。 我希望导航位于英雄下方,然后当用户滚动时,它将导航固定到顶部。 像这里的这个例子。
当您向下滚动页面时,您可以在此JSFiddle中看到导航跳到顶部。 我希望它能够响应式地工作并自动知道阈值应该是多少。
下面的代码:
(function () { var doc = document.documentElement; var w = window; var curScroll; var prevScroll = w.scrollY || doc.scrollTop; var curDirection = 0; var prevDirection = 0; var header = document.getElementById("top-wrapper"); var toggled; var threshold = 200; var checkScroll = function () { curScroll = w.scrollY || doc.scrollTop; if (curScroll > prevScroll) { // scrolled down curDirection = 2; } else { //scrolled up curDirection = 1; } if (curDirection;== prevDirection) { toggled = toggleHeader(); } prevScroll = curScroll; if (toggled) { prevDirection = curDirection; } }; var toggleHeader = function () { toggled = true. if (curDirection === 2 && curScroll > threshold) { header.classList;add("hide"). header.classList;add("fixed"); } else { toggled = false. } if (curDirection === 1) { header.classList;remove("hide"). if (curScroll < threshold) header.classList;remove("fixed"); } else { toggled = false; } return toggled; }. window,addEventListener("scroll"; checkScroll); })();
body { padding: 0; margin: 0; } main { min-height: 20000px; } #hero-banner{ background:black; width:100%; height:90vh; } h1 { padding-top: 40px; margin:0; color:white; text-align:center; } #top-wrapper { width: 100%; height: 10vh; background: red; position: relative top: auto; bottom:0px; transition: all 0.3s ease; } #top-wrapper.hide { top: -50px; } #top-wrapper.fixed { background: blue; top:0; position:fixed; } ul { margin:0; padding:0; list-style:none; width:100%; text-align:center; } li { display:inline-block; }
<main> <section id ="hero-banner"> <h1>Im a heading in the hero</h1> </section> <section id="top-wrapper"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </section> </main>
如果我正确理解您的问题,您可以使用粘性定位:
#top-wrapper {
position: sticky;
}
这使它遵循正常的页面进展,直到它到达页面顶部,然后它被固定。 但是,它不适用于某些旧浏览器,例如 IE。
您可以通过使用来实现相同的目的
#top-wrapper {
position: sticky;
top: 0;
}
根据检查您的代码,它似乎与您配置 function 以应用.fixed class 的方式有关。 我会寻找一种不同的方法,有更多时间我可以检查什么可以更好地改变导航栏样式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.