javascript - 标题淡出像素点触发

Question

所以我试图让我的标题在用户到达某个像素点(比如向下 300)时淡出([

$(document).on("scroll", function () {
  if ($(document).scrollTop() > 250) {
    $("header").fadeOut();
  } else {
    $("header").fadeIn();
  }
})

header { 
  opacity: 1;
}

header .fade { 
  opacity:  0;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<header class="fade">
    <h1>
      amateur designer and very amateur developer.
    </h1>
    </header>

] 1 ), 以及我拥有的 js refuses to work我不知道为什么!请帮忙!

Answer 1

我认为您的 CSS 干扰了 jQuery 的自然 fadeIn/fadeOut 行为。如果您删除 CSS 并将其转储到 fiddle 中，它就可以工作!

https://jsfiddle.net/768u4r3z/2/