How do I make an element disappear and reappear when scrolling down?
Question
So on my website I have a fixed bar at the top which spans the length of the page, the bar is a h1. Attached to that is a mini navigation with back and home buttons which sits below it and is also fixed. The mini nav gets in the way when reading the page content as you scroll down so I would like to make the nav disappear when the user scrolls down and also give the option to have it reappear by moving the mouse over the top/clicking the top bar/swiping the top bar on a touch screen etc etc.
How do I go about doing this?
Here's the HTML:
<header class="mainHeader">
<h1>Page Title</h1>
<nav class="secondaryNav">
<a href="home.htm"><img class="backButton" src="img/back2.png" alt="Back Button"></a>
<a href="home.htm"><img class="homeButton" src="img/home.png" alt="Home Button"></a>
</nav>
<aside><p id="countdown"></p></aside>
</header>
<!-- end .mainHeader -->
And the CSS:
.mainHeader h1 {
position: fixed;
top: 0;
width: 100%;
background: #ea594e;
box-shadow: 0 0 3px 3px #888888;
font-family: verdana;
font-variant: small-caps;
color: white;
border-bottom: 1px solid black;
margin: 0;
padding-bottom: 0.5%;
text-align: center;
}
.mainHeader .secondaryNav {
background: #ffcda4;
box-shadow: 0 3px 3px 1px #888888;
border: 1px solid;
border-top: none;
width: 400px;
position: fixed;
top: 49px;
left: 50%;
margin-left: -200px;
border-radius: 0 0 50px 50px;
padding-top: 5px;
}
The bar is h1 and the mini nav is secondaryNav
3 answers
solution1
0 2014-04-03 15:15:15
You can use scrollTop for this and check on how much user had scrolled down like
$(function() {
$(document).on("mousewheel", function() {
if($(document).scrollTop() > 100){
$('.secondaryNav').show();
$('.mainHeader h1').hide();
} else {
$('.secondaryNav').hide();
$('.mainHeader h1').show();
};
});
});
Here is working Fiddle (change the css a little bit for it to look better, but the main point is there)
solution2
0 2014-06-05 13:27:53
this simple code might help u. JSFIDDLE
//Keep track of last scroll
var lastScroll = 0;
$(window).scroll(function(event){
//Sets the current scroll position
var st = $(this).scrollTop();
//Determines up-or-down scrolling
if (st > lastScroll){
//secondaryNav disappears when scrolled down
$(".secondaryNav").css("display","none");
}
else {
//secondaryNav disappears when scrolled up
$(".secondaryNav").css("display","block");
}
//Updates scroll position
lastScroll = st;
});
solution3
0 2019-04-01 17:19:55
Here is the simple and commonly usefull way for showing and hiding specific div on movement of your mouse:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<button onmousewheel="myFunction()">wheel mouse on me to hide and show div</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.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.