In this tutorial, we are going to learn to hide/show HTML element on scroll inside a webpage.
Source Code :
<style type="text/css"> .more-stories{ display: none; position: fixed; bottom: -50px; right: 10px; width: 350px; background: #fff; padding: 20px 40px; } .more-item{ margin-bottom: 15px; border-bottom: 1px solid #ddd; } .more-title{ font-weight: bold; font-size: 14px; } .more-head{ margin-bottom: 5px; } </style> <div class="more-stories container"> <div class="row more-head"> <h4>More From Blog</h4> <hr> </div> <div class="row more-item"> <div class="col-md-4" style="padding:0px;"> <img style="width:100%;" src="https://reeteshghimire.com.np/wp-content/uploads/2020/06/cyber-security.jpg"> </div> <div class="col-md-8"> <p class="more-title"> <a href="#"> Reasons why Cyber Security needs more priority </a> </p> </div> </div> <div class="row more-item"> <div class="col-md-4" style="padding:0px;"> <img style="width:100%;" src="https://reeteshghimire.com.np/wp-content/uploads/2020/06/cyber-security.jpg"> </div> <div class="col-md-8"> <p class="more-title"> <a href="#"> Reasons why Cyber Security needs more priority </a> </p> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript"> $(window).scroll(function(event){ var scorll = $(window).scrollTop(); if(scrollTop>400){ $(".more-stories").slideDown(); }else{ $(".more-stories").slideUp(); } }); </script>