How to make navbar disappear when scrolling?
Question
I want to make it so when a user is scrolling, the expanded navbar in smaller view will disappear. Here's what it looks like:
When the user scrolls, I want that to collapse.
https://jsfiddle.net/2pzx0fqy/
Ignore the broken images, how can I make it so the navbar disappears? Basically, how I'm toggling the navbar right now is using max-height and transition. So when the user scrolls, how can I make it so that it'll collapse the navbar but also the user can click it again?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type ="text/css" href = "nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class = "navigationBar">
<img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon">
<ul class = "linkBar">
<li><a href = "#"><i class="fa fa-home"></i> Home</a></li>
<li><a href = "#"><i class="fa fa-star" aria-hidden="true"></i> Skills</li>
<li><a href = "#"><i class="fa fa-envelope" aria-hidden="true"></i> Contact</a></li>
<li><a href = "#"><i class="fa fa-user" aria-hidden="true"></i> About</a></li>
<li><a href = "#"><i class="fa fa-briefcase" aria-hidden="true"></i> Services</a></li>
<li><a href = "#">Miscellaneous</a></li>
</ul>
</nav>
<section class = "title">
<img src = "me.jpg" class = "me">
<h1 class = "top-name"></h1>
<h2 class = "top-subtitle">Student - Web Developer - Tutor/Educator</h2>
</section>
<section class = "skills">
<h1 class = "head-title">Skills</h1>
<div class = "skill-icons">
<img src = "bigicons/java.png" id = "java">
<img src = "bigicons/c.png">
<img src = "bigicons/html.png">
<img src = "bigicons/js.png">
<img src = "bigicons/css.png">
<img src = "bigicons/git.png">
</div>
<div class = "modal" id = "modal">
<div class = "modal-content" id = "lol">
<span class="close">×</span>
<p>This is a Modal</p>
</div>
</div>
</section>
<section class = "about">
<h1 class = "head-title">About</h1>
<article class = "about-article">
</article>
</section>
<section class = "contact">
<article>
Interested in collaborating or just want to get to know me more? Lucky for you, there are several ways you can reach out to me.
</article>
<article>
</article>
</section>
<script>
$('.menuIcon').on('click', function() {
$('nav ul').toggleClass('show');
});
$(function() {
$(document).on("mousewheel", function() {
$('nav ul').toggleClass('hide');
});
});
var modal = document.getElementById('modal');
var jBtn = document.getElementById('java');
var span = document.getElementsByClassName("close")[0];
jBtn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function ()
{
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css?family=Asap');
@import url('https://fonts.googleapis.com/css?family=Bitter|Dosis|Fira+Sans|Nunito|Oxygen');
body
{
background-color: #598392;
margin: 0;
padding: 0;
font-family: 'Bitter', 'Asap', sans-serif;
}
.menuIcon
{
padding:20px;
display:none;
cursor:pointer;
transition: transform: 0.5s;
}
.navigationBar
{
background-color: #2E86AB;
width:100%;
overflow:hidden;
position:fixed;
z-index: 1;
}
.title
{
overflow:hidden;
display: flex;
flex-direction: column;
background-color: #F7C174;
padding-top:100px;
align-items: center;
}
.top-name
{
font-size:75px;
position: relative;
top:-60px;
text-align: center;
}
.top-subtitle
{
text-align: center;
position: relative;
top:-80px;
}
.navigationBar li
{
padding:20px;
display: inline;
list-style-type:none;
font-size: 22px;
}
a
{
color: #EFF6E0;
text-decoration: none;
}
a:hover
{
color: #AEC3B0;
}
nav ul
{
padding: 20px;
margin: 0;
transition: max-height 1s;
}
.title h1
{
padding: 75px 0 0 20px;
}
.title article
{
padding: 20px;
}
.me
{
width:250px;
height:250px;
border-radius: 100%;
}
.skills
{
background-color: #FFEECF;
overflow: hidden;
height:auto;
padding-bottom: 50px;
}
.skill-icons
{
display:flex;
width:100%;
justify-content:space-around;
flex-direction: row;
flex-wrap: wrap;
height: auto;
}
.skill-icons > img
{
padding: 50px;
height:128px;
width:128px;
}
.head-title
{
font-size: 60px;
text-align: center;
}
.about
{
overflow: hidden;
background-color: #F7C174;
}
.about-article
{
padding: 50px;
}
.contact
{
background-color: #FFEECF
}
/* Modal Stuff */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.show
{
display:block;
}
@media only screen and (max-width: 768px)
{
.menuIcon
{
display:block;
}
.navigationBar li
{
display:block;
padding: 10px;
text-align: left;
margin-left: 30px;
font-size: 16px;
}
nav ul
{
max-height: 0;
padding: 0px;
}
.show
{
max-height: 250px;
}
.hide
{
max-height: 0px;
}
.title article
{
padding: 20px;
}
.skill-icons > img
{
padding: 20px;
height:30%;
width:30%;
}
}
/*
@media only screen and (min-width: 768px)
{
nav ul
{
display: block !important;
}
}
*/
1 answers
solution1
1 2018-01-21 21:53:30
Add this code to your javaScript:
When you scroll down, it'll fade away. When the user scrolls back up, it fades back in.
If this isn't exactly what you want, let me know.
EDIT: Per posters request, I have updated javaScript to make it so that no matter where you scroll up, it will fade back in.
var mywindow = $(window); var mypos = mywindow.scrollTop(); var up = false; var newscroll; mywindow.scroll(function () { newscroll = mywindow.scrollTop(); if (newscroll > mypos && !up) { $('.navigationBar').stop().fadeOut(); up = !up; console.log(up); } else if(newscroll < mypos && up) { $('.navigationBar').stop().fadeIn(); up = !up; } mypos = newscroll; });
@import url('https://fonts.googleapis.com/css?family=Asap'); @import url('https://fonts.googleapis.com/css?family=Bitter|Dosis|Fira+Sans|Nunito|Oxygen'); body { background-color: #598392; margin: 0; padding: 0; font-family: 'Bitter', 'Asap', sans-serif; } .menuIcon { padding:20px; display:none; cursor:pointer; transition: transform: 0.5s; } .navigationBar { background-color: #2E86AB; width:100%; overflow:hidden; position:fixed; z-index: 1; } .title { overflow:hidden; display: flex; flex-direction: column; background-color: #F7C174; padding-top:100px; align-items: center; } .top-name { font-size:75px; position: relative; top:-60px; text-align: center; } .top-subtitle { text-align: center; position: relative; top:-80px; } .navigationBar li { padding:20px; display: inline; list-style-type:none; font-size: 22px; } a { color: #EFF6E0; text-decoration: none; } a:hover { color: #AEC3B0; } nav ul { padding: 20px; margin: 0; transition: max-height 1s; } .title h1 { padding: 75px 0 0 20px; } .title article { padding: 20px; } .me { width:250px; height:250px; border-radius: 100%; } .skills { background-color: #FFEECF; overflow: hidden; height:auto; padding-bottom: 50px; } .skill-icons { display:flex; width:100%; justify-content:space-around; flex-direction: row; flex-wrap: wrap; height: auto; } .skill-icons > img { padding: 50px; height:128px; width:128px; } .head-title { font-size: 60px; text-align: center; } .about { overflow: hidden; background-color: #F7C174; } .about-article { padding: 50px; } .contact { background-color: #FFEECF } /* Modal Stuff */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .show { display:block; } @media only screen and (max-width: 768px) { .menuIcon { display:block; } .navigationBar li { display:block; padding: 10px; text-align: left; margin-left: 30px; font-size: 16px; } nav ul { max-height: 0; padding: 0px; } .show { max-height: 250px; } .hide { max-height: 0px; } .title article { padding: 20px; } .skill-icons > img { padding: 20px; height:30%; width:30%; } } /* @media only screen and (min-width: 768px) { nav ul { display: block !important; } } */
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel = "stylesheet" type ="text/css" href = "nav.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <nav class = "navigationBar"> <img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon"> <ul class = "linkBar"> <li><a href = "#"><i class="fa fa-home"></i> Home</a></li> <li><a href = "#"><i class="fa fa-star" aria-hidden="true"></i> Skills</li> <li><a href = "#"><i class="fa fa-envelope" aria-hidden="true"></i> Contact</a></li> <li><a href = "#"><i class="fa fa-user" aria-hidden="true"></i> About</a></li> <li><a href = "#"><i class="fa fa-briefcase" aria-hidden="true"></i> Services</a></li> <li><a href = "#">Miscellaneous</a></li> </ul> </nav> <section class = "title"> <img src = "me.jpg" class = "me"> <h1 class = "top-name"></h1> <h2 class = "top-subtitle">Student - Web Developer - Tutor/Educator</h2> </section> <section class = "skills"> <h1 class = "head-title">Skills</h1> <div class = "skill-icons"> <img src = "bigicons/java.png" id = "java"> <img src = "bigicons/c.png"> <img src = "bigicons/html.png"> <img src = "bigicons/js.png"> <img src = "bigicons/css.png"> <img src = "bigicons/git.png"> </div> <div class = "modal" id = "modal"> <div class = "modal-content" id = "lol"> <span class="close">×</span> <p>This is a Modal</p> </div> </div> </section> <section class = "about"> <h1 class = "head-title">About</h1> </section> <section class = "contact"> <article> Interested in collaborating or just want to get to know me more? Lucky for you, there are several ways you can reach out to me. </article> <article> </article> </section> <script> $('.menuIcon').on('click', function() { $('nav ul').toggleClass('show'); }); $(function() { $(document).on("mousewheel", function() { $('nav ul').toggleClass('hide'); }); }); var modal = document.getElementById('modal'); var jBtn = document.getElementById('java'); var span = document.getElementsByClassName("close")[0]; jBtn.onclick = function() { modal.style.display = "block"; } span.onclick = function () { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>
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.
Related Question
How to make navbar disappear when zoom?
How do I make an element disappear and reappear when scrolling down?
How to make Div disappear when scrolling (this) close to bottom
how to make class disappear when scrolling up in jquery
How to make footer disappear when scrolling to the specific div on the page?
Navbar change when scrolling down, how to make the change responsive?
How to make a navbar fully disappear with bootstrap 4
How to make an element disappear after scrolling?
How to make navbar disappear when I click on link tag from menu
How to make Navbar text colour change by scrolling
Related Tags