这是我第一次构建网站，我不知道如何在向下滚动时强制隐藏标题。我下载了一个很酷的免费网站模板，它很酷但很复杂。我知道网页设计的基本知识：当我有从CSS样式调用类主标题的标题时，我就有了HTML文件，然后在HTML脚本的末尾调用javascript脚本。
<!-- Start Main Top -->
<header class="main-header">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default bootsnav">
<div class="container">
<!-- Start Header Navigation -->
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logo" alt=""></a>
</div>
<!-- End Header Navigation -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav ml-auto" data-in="fadeInDown" data-out="fadeOutUp">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about.html"> About Us</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="contact-us.html">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- Start Atribute Navigation -->
<div class="attr-nav">
<ul>
<li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
</ul>
</div>
<!-- End Atribute Navigation -->
</div>
</nav>
<!-- End Navigation -->
</header>
我在HTML文件上使用了这段代码，然后，我创建了以下JS脚本来隐藏标题：
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header").style.top = "0";
} else {
document.getElementById("header").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
并且与该报头相关的代码的style.css部分是：
.main-header.fixed-menu {
position: fixed;
visibility: hidden;
left: 0px;
top: 0px;
width: 100%;
padding: 0px 0px;
background: #ffffff;
z-index: 0;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
z-index: 999;
opacity: 1;
visibility: visible;
-ms-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-op-animation-name: fadeInDown;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-ms-animation-duration: 500ms;
-moz-animation-duration: 500ms;
-op-animation-duration: 500ms;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-ms-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-op-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-ms-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-op-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.main-header.fixed-menu {
padding: 0px;
box-shadow: 0 0 8px 0 rgba(0,0,0,.12);
border-radius: 0;
}
我真的不知道问题出在哪里，也不知道代码是否有什么问题。我不精通HTML和网页设计，所以我需要你的帮助！：(
谢谢！
正如s.kuznetsov所建议的那样，您缺少了一些东西：
-
在
<header class="main-header">中，您缺少id="header"和第二类fixed-menu，因此正确的结果是<header id="header" class="main-header fixed-menu"> -
由于页面内容不长于您用于测试的窗口，滚动事件无法发生，因此您需要将内容添加到html中，如
<body></body>，并在cssbody { height: 200vh; background-color: black;}中指定高度 -
除此之外，我会将js
从document.getElementById("header").style.top = "-50px";
修改为document.getElementById("header").style.top = "-100%";
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header").style.top = "0";
} else {
document.getElementById("header").style.top = "-100%";
}
prevScrollpos = currentScrollPos;
}.main-header.fixed-menu {
position: fixed;
visibility: hidden;
left: 0px;
top: 0px;
width: 100%;
padding: 0px 0px;
background: #ffffff;
z-index: 0;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
z-index: 999;
opacity: 1;
visibility: visible;
-ms-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-op-animation-name: fadeInDown;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-ms-animation-duration: 500ms;
-moz-animation-duration: 500ms;
-op-animation-duration: 500ms;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-ms-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-op-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-ms-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-op-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.main-header.fixed-menu {
padding: 0px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
border-radius: 0;
}
body {
height: 200vh;
background-color: black;
}<!-- Start Main Top -->
<header id="header" class="main-header fixed-menu">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default bootsnav">
<div class="container">
<!-- Start Header Navigation -->
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logo" alt=""></a>
</div>
<!-- End Header Navigation -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav ml-auto" data-in="fadeInDown" data-out="fadeOutUp">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about.html"> About Us</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="contact-us.html">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- Start Atribute Navigation -->
<div class="attr-nav">
<ul>
<li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
</ul>
</div>
<!-- End Atribute Navigation -->
</div>
</nav>
<!-- End Navigation -->
</header>
<body>
</body>