CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Space Goat
Space Goat

Reputation: 93

How do I make an element disappear and reappear when scrolling down?

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

Upvotes: 4

Views: 10943

Answers (3)

Sabin Bajgain
Sabin Bajgain

Reputation: 43

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>

Upvotes: 0

madhu kumar
madhu kumar

Reputation: 810

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;
          });

Upvotes: 1

Y.Puzyrenko
Y.Puzyrenko

Reputation: 2196

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)

Upvotes: 0

Related Questions