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

Question

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

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

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

该代码有几个问题：

1. 将bottom_of_window 移出each
2. 不需要加bottom_of_object或bottom_of_window到任何东西，只需要一点offset例如+100为bottom_of_window
3. 对于fadeOut，只需使用else 条件。
4. 而不是$("body, html").scrollTop(); 使用$(window).scrollTop()
5. 并且在这种情况下使用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);