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

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 fadeOut
3. else仅使用$("body, html").scrollTop();条件。
4. 而不是$(window).scrollTop()使用animation
5. 在这种情况下使用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);代替http://<HOST>:<PORT>/emp/{id}