Display Hide HTML Element on Scroll using JQuery

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>