如何在向下滚动800px后显示div并在向上滚动时隐藏它？

在 800 像素后向下滚动时显示 Div

问题：

如何制作从页面顶部向下滚动 800px 后会出现隐藏的 div 吗？向上滚动并且高度小于 800px 时，div 应该消失。

HTML:

<div class="bottomMenu">
  <!-- content -->
</div>

CSS:

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

用于滚动的 jQuery 变体800px:

此 jQuery 代码将在向下滚动后显示 div 800px:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

向上滚动时隐藏的滚动事件变体：

向上滚动且高度小于时隐藏div 800px，使用此代码：

$(document).scroll(function() {
  var height = $(window).scrollTop();

  if (height > 800) {
    $('.bottomMenu').css({
      display: 'block',
      opacity: 1
    });
  } else {
    $('.bottomMenu').css({
      display: 'none',
      opacity: 0
    });
  }
});

以上是如何在向下滚动800px后显示div并在向上滚动时隐藏它？的详细内容。更多信息请关注PHP中文网其他相关文章！