javascript - 滚动到顶部边缘而不是底部边缘时显示Div

我正在使用here中的代码，但是当顶部滚动到底部而不是底部时，我需要它来显示div，我该如何实现呢？
JS Fiddle

    $(document).ready(function() {
    $(window).scroll( function(){
        $('.hide').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        });

    });

});

最佳答案

简单修复。诀窍是当您实际到达顶部时.animate()。现在，您正在使用

var bottom_of_object = $(this).position().top + $(this).outerHeight()

您不需要$(this).outerHeight()，因为这样可以将您需要滚动到y的位置增加div的高度。只需将其删除，即可

var top_of_object = $(this).position().top

$(document).ready(function() {
  $(window).scroll(function() {
    $('.hide').each(function(i) {
      var bottom_of_object = $(this).position().top
      var bottom_of_window = $(window).scrollTop() + $(window).height()

      if (bottom_of_window > bottom_of_object)
        $(this).animate({ opacity: '1' }, 500)
    })
  })
})

#container { height: 2000px }
#container div { background-color: gray; margin: 20px; padding: 80px }
.hide { opacity: 0 }

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

fiddle（后代）

关于javascript - 滚动到顶部边缘而不是底部边缘时显示Div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25354717/