htmljqueryfadeinfadeout

Fade html dom elements on scroll

Can't seem to spot the error here. I want the ".title" class to fade in and out when the ".top" class is scrolled to 150px

$(document).ready(function(){
        $(".top").on("scroll", function(){
          if($(this).scrollTop = 150){
            $(".title").fadeToggle(1000);
          });
        });
      });
Solution

  • Was it necessary?

    $(document).ready(function(){
  $(window).on("scroll", function() {
      if ($(this).scrollTop() >= 150) {
        $(".title").fadeToggle(1000);
      } else {}
  }); 
});
    .top {
  height: 3000px;
  background-color: green;
}

.title {
  position: sticky;
  top: 0;
  color: white;
  font-size: 28px;
  text-align: center;
  margin: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
  <p class="title">This is title</p>
</div>