How to Change Element Opacity When User Scrolls Down the Page in Browser Using jQuery in Javascript

 

Welcome folks today in this blog post we will be changing element opacity when user scrolls down the page in browser using jquery in javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<!DOCTYPE html>
<html>
<head>
  <title>Change opacity on scroll</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(window).scroll(function(){
        if($(this).scrollTop() > 100){
          $(".topbar").css({"opacity" : "0"})
        }
        else {
          $(".topbar").css({"opacity" : "1"})
        }
      })
    })
    </script>
</head>
<body>
  <div class="topbar">
  </div>
  <section></section>
  <section></section>
</body>
</html>

 

READ  Build a Decimal to HEX Color Converter in Vanilla Javascript Full Project For Beginners

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

body{
  margin: 0;
  padding: 0;
}
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: black;
  transition: .5s;
}
section{
  width: 100%;
  height: 100vh;

}

Leave a Reply