How do I show some particular div after scroll 100 px?

jquery_scroll _divYou can achieve this by using javascript’s pageYOffset property to show the div after 100px of scroll.
The pageXOffset and pageYOffset properties returns the pixels the current document has been scrolled from the upper left corner of the window, horizontally and vertically.
The pageXOffset and pageYOffset properties are equal to the scrollX and scrollY properties. These properties are read-only.
Let us see the code:

 

HTML :

<!-- Filename : index.html -->
<!Doctype html>
<html lang = "en-US">
  <head>
    <title>Show div after 100px scroll</title> 
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type = "text/javascript" src="script.js"></script> 
  </head> 
   <body>
      <div> 
        some content 
      </div> 
   </body> 
</html>

 

CSS :

/* Filename: style.css */
body {
  min-height: 2000px;
}
div {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100px;
  background-color: black;
}

JS :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
window.addEventListener("scroll",function(){
  var target = document.getElementsByTagName('div');
  var val = document.getElementsByTagName('p');
  if(window.pageYOffset > 500){
   target[0].style.display = "block"; 
  }
  else if(window.pageYOffset < 500){
    target[0].style.display = "none";
  }
  val[0].innerHTML = 'PageYOffset = ' + window.pageYOffset;
},false);

</script>

 

Please follow and like us:
error

Add a Comment

Your email address will not be published. Required fields are marked *