任何向下滚动的内容都会使导航栏消失,而我不希望那样。我只希望它在滚动时消失。我试过删除滚动对象上所有对象的滚动功能。已经坚持了几天。我知道为什么会这样做,因为我具有内置功能,可以使导航栏向下滚动时消失。但是,仅在单击时,我不希望这种情况发生-我希望导航保持不变。
任何帮助将不胜感激。坚持了几天。不确定如何从窗口中删除滚动事件以使其正常工作。
'use strict';
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
const arr = Array.from(section)
arr.forEach(function(el) {
sections[el.id] = el.offsetTop;
});
window.onscroll = function() {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
document.querySelector('.active').setAttribute('class', ' ');
document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
}
}
};
var nav = document.querySelector('.nav');
var navText = document.querySelectorAll(".links");
function scrolling() {
// Initial state
var scrollPos = 0;
// adding scroll event
addEventListener('scroll', function(e) {
// detects new state and compares it with the old one
if ((document.body.getBoundingClientRect()).top > scrollPos)
nav.style.visibility = "visible"
if ((document.body.getBoundingClientRect()).top < scrollPos)
nav.style.visibility = "hidden"
// saves the new position for iteration.
scrollPos = (document.body.getBoundingClientRect()).top;
});
}
scrolling();
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;
}
}
<link rel="stylesheet" href="portfolio.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<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>
答案 0 :(得分:0)
我通过在较早的项目之一中使用Bootstrap实现了这一目标。如果要使用引导程序,则可以在单击或滚动时使用“固定顶层类”对其进行修复。您可以在这里找到更多信息;
[https://getbootstrap.com/docs/4.1/utilities/position/#fixed-top][1]