Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

How Do I Make An Element Disappear And Reappear When Scrolling Down?

Post a Comment
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 belo

Solution 1:

this simple code might help u. JSFIDDLE

//Keep track of last scrollvar lastScroll = 0;
          $(window).scroll(function(event){
              //Sets the current scroll positionvar st = $(this).scrollTop();
              //Determines up-or-down scrollingif (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;
          });

Solution 2:

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)

Solution 3:

Here is the simple and commonly usefull way for showing and hiding specific div on movement of your mouse:

<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style>#myDIV {
  width: 100%;
  padding: 50px0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
</style></head><body><buttononmousewheel="myFunction()">wheel mouse on me to hide and show div</button><divid="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>functionmyFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script></body></html>

Post a Comment for "How Do I Make An Element Disappear And Reappear When Scrolling Down?"