我在这里遇到了一些用户界面问题。我有一个导航栏，可以在向上或向下滚动时淡入和淡出。问题是，当您单击导航中的链接时，单击彼此右侧的文本时导航栏会完全消失。我尝试过删除事件监听器、嵌套事件监听器并从嵌套事件监听器中删除、使事件成为一个单独的函数并将其取消、使滚动事件为 true 和 false/null 等，但都无济于事。
如何让导航栏在点击事件时保持不变而不消失？任何答案、建议、改进或一些正确方向的提示将不胜感激，现在已经坚持了很长一段时间了。
代码:
<html>
<link rel="stylesheet" href="portfolio.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font: 24px 'Roboto', sans-serif;
background: url("images/someTree.jpg") no-repeat;
background-size: cover;
}
header {
opacity: 0.9;
width: 100%;
height: 85px;
position: fixed;
z-index: 1000;
background-color: #96C339;
}
header h1#logo {
float: left;
font-family: "Roboto", sans-serif;
font-size: 40px;
color: #FFF;
font-weight: 400;
margin-left: 35px;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 100px;
margin-left: 20px;
margin-right: 20px;
color: #FFF;
font-weight: 700;
font-size: 20px;
text-decoration: none;
}
a {
font-family: 'Droid Sans', serif;
color: white;
text-decoration: none;
line-height: 40px;
}
.active {
font-family: 'Droid Sans', serif;
font-size: 22px;
color: #000;
text-decoration: none;
line-height: 40px;
}
#about {
background-color: #fff;
height: 100vh;
width: 100vw;
opacity: 0.6;
}
#skills {
background-color: #fff;
height: 100vh;
width: 100vw;
opacity: 0.6;
}
#contact {
background-color: #fff;
height: 100vh;
width: 100vw;
opacity: 0.6;
}
@media all and (max-width: 770px) {
header h1#logo {
font-size: 30px;
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 55px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
margin-top: -65px;
}
header nav a {
font-size: 15px;
line-height: 50px;
margin: 0 5px;
}
}
</style>
<body>
<div class="wrapper">
<header class="nav">
<h1 id="logo">DMac</h1>
<nav>
<a href="#about" class="active">About</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
</header>
<div id="about" class="section"></div>
<div id="skills" class="section"></div>
<div id="contact" class="section"></div>
<script> (function () {
// Where Navigation text links to
const section = document.querySelectorAll(".section");
// Navigation bar wrapper
const nav = document.querySelector(".nav");
// Navigation anchor text
const anchors = document.querySelectorAll(".visible");
// Set
const sections = {};
'use strict';
// Initial scroll state
let scrollPos = 0;
// Scroll event
let scrolling = false;
document.addEventListener('scroll', scrollEvent)
// Detects scroll state and compares it with the new one to fade in/fade out.
function scrollEvent() {
scrolling = true;
if ((document.body.getBoundingClientRect()).top > scrollPos) {
nav.style.transition = "all 1.0s";
nav.style.opacity = 1;
nav.style.visibility = "visible"
} else {
nav.style.transition = "all 1.0s";
nav.style.opacity = 0;
nav.style.visibility = "hidden";
}
scrollPos = (document.body.getBoundingClientRect()).top;
// Turn each dom anchor into and array and iterate through each (by id)
const arr = Array.from(section)
arr.forEach(function (el) {
sections[el.id] = el.offsetTop;
});
const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
Object.keys(sections).forEach((el) => {
if (sections[el] <= scrollPosition) {
document.querySelector('.active').setAttribute('class', ' ');
document.querySelector('a[href*=' + el + ']').setAttribute('class', 'active');
}
})
}
// Keep the scroll function from constantly firing.
setInterval(function () {
if (scrolling) {
scrolling = false;
}
}, 250);
// Start scroll event
scrollEvent();
}());
</script>
</div>
</body>
</html>
最佳答案
因此，当您滚动时，以下代码会隐藏滚动条。单击导航链接也会滚动到页面上的某些部分。一旦到达该部分，您应该使滚动条再次可见。
if ((document.body.getBoundingClientRect()).top > scrollPos) {
nav.style.transition = "all 1.0s";
nav.style.opacity = 1;
nav.style.visibility = "visible"
} else {
nav.style.transition = "all 1.0s";
nav.style.opacity = 0;
nav.style.visibility = "hidden";
}
我将以下内容更新为您的代码并且它有效。
setInterval(function () {
if (scrolling) {
scrolling = false;
nav.style.transition = "all 1.0s";
nav.style.opacity = 1;
nav.style.visibility = "visible"
}
}, 250);
关于javascript - 单击其中的 anchor 链接时，如何使导航栏停止消失？它为什么要这么做？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52455025/