javascript - 使用 id/class 滚动 div 隐藏/显示

Question

我试图在从下到上滚动时隐藏 div，从上到下滚动最后它应该显示 div，但以某种方式发生了一些问题，或者其他图像看起来像这样 -

我使用的方法是这样的:

$(window).scroll(function() {

        if ($(this).scrollTop()>0)
        {
            $("div.nav-down").fadeOut();
        }
        else
        {
            $("div.nav-down").fadeIn();
        }
    });

Answer 1

我能够使用 animate 函数而不是 fadeOut 和 fadeIn 函数来完成此操作(它仅在页面的绝对底部出现时出现):

$(window).scroll(function(){
	var scrollTop = $(this).scrollTop();
	if(scrollTop  + $(this).height() == $(document).height() ) {
		$(".nav-down").stop().animate({
			opacity: "1",
      height: "50px"
		});
	} else {
		$(".nav-down").stop().animate({
			opacity: "0",
      height: "0px"
		});
	}
});

.wrapper {
  width: 400px;
  height: 300px;
}

.nav-down {
  float: left;
  width: 400px;
  height: 50px;
  background-color: red;
}

.lorum {
  float: left;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="lorum">Example text to make it able to scroll up and down: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue augue, vestibulum nec convallis vitae, feugiat vel dui. Pellentesque consectetur justo magna. Lorem ipsum dolor sit amet, et auctor ex varius sit amet. Etiam et vulputate nulla. Donec ac leo</div>
  <div class="nav-down">test</div>
  <div class="lorum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue augue, vestibulum nec convallis vitae, feugiat vel dui. Pellentesque consectetur justo magna, et auctor ex varius sit amet. Etiam et vulputate nulla. Donec ac leo</div>
</div>

希望对你有帮助