如何根据滚动位置显示和隐藏div？

从顶部滚动 800px 后显示隐藏的 Div

场景：

您想要在用户之后显示隐藏的 div将页面向下滚动 800 像素。此外，当用户向上滚动并且高度小于 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;
}

JavaScript (jQuery):

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

说明：

此脚本监视文档的滚动位置。当滚动位置大于 800 像素时，会触发 .bottomMenu div 的淡入动画。相反，当滚动位置低于 800 像素时，会触发淡出动画。

以上是如何根据滚动位置显示和隐藏div？的详细内容。更多信息请关注PHP中文网其他相关文章！