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






<!DOCTYPE html>
  <title>Change opacity on scroll</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src=""></script>
  <script type="text/javascript">
        if($(this).scrollTop() > 100){
          $(".topbar").css({"opacity" : "0"})
        else {
          $(".topbar").css({"opacity" : "1"})
  <div class="topbar">


See also  Build a Random HEX & RGBA Color Generator in Browser Using Javascript Full Project For Beginners


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






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


Leave a Reply