在滚动条上淡化 html dom 个元素

Question

这里似乎找不到错误。当“.top”class 滚动到 150px

时，我希望“.title”class 淡入淡出

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

Answer 1

有必要吗？

$(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>

在滚动条上淡化 html dom 个元素

Fade html dom elements on scroll

html

jquery

fadeout

fadein