It's my first time building a web site and I don't know how to force hiding the header when scrolling down. I downloaded a cool free template of web site which is very cool but complex. I know the basics of web design: I have the HTML file when I have the header calling the class main-header from the CSS styles and then, the javascript scripts are called at the end of the HTML script.
<!-- 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>
I'm using that code on the HTML file and then, I have created the following JS script to hide the header:
/* 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;
and the style.css portion of the code related to that header is:
.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;
}
I really don't get where is the problem or if there is anything wrong with the code. I am not proficient with HTML and web design so I need your help: :)
Thanks!
As s.kuznetsov proposed you are missing some things:
In <header class="main-header">
you are missing id="header"
and the second class fixed-menu
so the correct result would be <header id="header" class="main-header fixed-menu">
As the page content is not longer than the window you are using for testing the scroll event cannot happen so you need to add content to your html like <body></body>
and assign height in the css body { height: 200vh; background-color: black;}
body { height: 200vh; background-color: black;}
Other than that I would modify the js
from document.getElementById("header").style.top = "-50px";
to 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.