使用html/css访问页面时隐藏导航栏
使用html/css访问页面时隐藏导航栏
提问于 2021-01-16 04:43:15
我正在为我的朋友做一个简单的文件夹。他想要它，这样当我进入他的文件夹部分时，导航栏就应该隐藏起来，只有当我将鼠标悬停在导航栏上时它才会显示出来。
我在w3schools上看到了很多关于他们如何做到这一点的教程，但还是做不到。下面是我的导航HTML代码。
再一次，我想要它，以便导航页面应该是隐藏的，当我点击“公文包”，它应该只显示当我悬停在它。
这里有一个例子说明了我的意思。https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll
HTML代码：
<header id="header" class="header-tops">
<div class="container">
<h1><a href="index.html">Parth Prajapati</a></h1>
<!-- <a href="index.html" class="mr-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a> -->
<h2>I'm a 4th year <span>Architectural Student</span> based in Toronto</h2>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav><!-- .nav-menu -->
<div class="social-links">
<!-- <a href="#" class="instagram"><i class="icofont-instagram"></i></a> -->
<a href="https://www.linkedin.com/in/parth-prajapati-93b34b143/" target="_blank" class="linkedin"><i class="icofont-linkedin"></i></a>
</div>
</div>
</header><!-- End Header -->JS代码：
var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementsByClassName('container').style.top = "0";
} else {
document.getElementsByClassName('container').style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}回答 1
Stack Overflow用户
发布于 2021-01-16 05:13:37
您添加了哪些css属性？有几件事你可以做来改进你的代码。1)查看您的导航栏位置是否需要fixed或sticky属性；2)对导航栏使用id，类的特异性低于id。您提供的示例具有此css。
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}您的js代码只是将样式应用于整个容器类，这是您真正想要的吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65743280
复制相关文章
相似问题
腾讯云开发者
