当我滚动到顶部时无法让我的 div 淡出

Question

我找到了一个脚本来更改滚动的不透明度并对其进行了一些修改。 div 淡化 IN 很好，但当我回到顶部时，我似乎无法扭转淡化。

当浏览器到达顶部时，我可以让浏览器 "alert" 我，但是不透明部分没有触发，似乎无法弄清楚原因。

$(document).ready(function() {

  /* Every time the window is scrolled ... */
  $(window).scroll(function() {

    /* Check the location of each desired element */
    $('.hideme').each(function(i) {

      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      /* If the object is completely visible in the window, fade it it */
      if (bottom_of_window > bottom_of_object) {
        $(this).animate({
          'opacity': '1'
        }, 500);
      }

      /*attempt to fade it out*/
      var scrollPosition = $("body, html").scrollTop();
      if (scrollPosition == 0) {
        $(this).animate({
          'opacity': '0'
        }, 500);
      }

    });

  });

});

#container {
  height: 2000px;
}

#container DIV {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
}

.hideme {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <div>Hello</div>
  <div class="hideme">Fade In</div>


</div>

JSFiddle

Answer 1

该代码有几个问题：

将 bottom_of_window 移出 each
不需要对任何东西加上bottom_of_object或bottom_of_window，只需要一点点offset例如+100为bottom_of_window
对于 fadeOut 只需使用 else 条件。
而不是 $("body, html").scrollTop(); 使用 $(window).scrollTop()
并且在这种情况下使用animation时，最好使用stop()以防止fadeIn和fadeOut效果之间的冲突。

有一些变化，现在开始：

$(window).scroll(function() {
  var bottom_of_window = $(window).scrollTop() + 100;
  $('.hideme').each(function(i) {
    var bottom_of_object = $(this).offset().top;
    if (bottom_of_window > bottom_of_object) {
      $(this).stop().animate({
        'opacity': '1'
      }, 500);
    } else {
      $(this).stop().animate({
        'opacity': '0'
      }, 500);
    }

  });

});

#container {
  height: 2000px;
}

#container div {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
}

.hideme {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <div>Hello</div>
  <div class="hideme">Fade In</div>
  <div class="hideme">Fade In 2</div>
  <div class="hideme">Fade In 3</div>

</div>

您可以使用 fadeIn(500) 或 fadeOut(500) 代替 $(this).animate({'opacity':'1'},500);

当我滚动到顶部时无法让我的 div 淡出

Can't get my div to fade OUT when I scroll to top

jquery

scrolltop

jquery-animate