如何解决粘性导航栏和粘性返回顶部按钮小部件的兼容性修复?
我在我的所有网页上都使用了一个 vanilla JS 粘性导航栏,并且我想向一个特定页面添加一个 vanilla JS 粘性返回顶部按钮。每个对我来说都是独立工作的,但我无法让两者兼容地工作(我发现我在代码中最后放置的小部件 JS 可以正常工作,但也会阻止其他小部件工作)。两个粘性小部件均改编自 W3Schools.com。
粘性导航栏 (https://www.w3schools.com/howto/howto_js_sticky_header.asp):
<style>
.navbar {
z-index: 1;
}
.sticky {
width: 100%;
position: fixed;
top: 0;
}
</style>
<nav id="navbar">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Me</a></li>
<li><a href="faqs.php">FAQs</a></li>
</ul>
</nav>
<script>
window.onscroll = function() {stickyHeader()};
var header = document.getElementById("navbar");
var sticky = header.offsetTop;
function stickyHeader() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
粘性返回顶部按钮 (https://www.w3schools.com/howto/howto_js_scroll_to_top.asp):
<style>
#toTop {
display: none;
position: fixed;
bottom: 5rem;
right: 5rem;
z-index: 1;
}
</style>
<button onclick="topFunction()" id="toTop" title="Back to Top"><img src="images/to-top.png"></button>
<script>
toTop = document.getElementById("toTop");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
toTop.style.display = "block";
} else {
toTop.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 100; // For Safari
document.documentElement.scrollTop = 100; // For Chrome,Firefox,IE and Opera
}
</script>
为了清晰起见,我省略了其他装饰性 CSS(大概没有相关性)。这些 JS 小部件(如上面的编码)本质上是不兼容的,还是我可以对代码进行修改以使其兼容?任何意见或建议将不胜感激。谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。