如何在向下滚动 800px 之后显示 Div 并在向上滚动时隐藏它？-css教程-PHP中文网

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

Barbara Streisand

发布： 2024-12-13 05:52:08

原创

986 人浏览过

How to Show a Div on Scroll Down After 800px and Hide It on Scroll Up?

重新访问 800px 后在 ScrollDown 上显示 Div

在这次重新讨论中，我们的目标是改进向下滚动时显示隐藏 div 的方法距页面 800px 之后top.

解决方案：

我们使用 JavaScript 的 $(document).scroll() 函数采用一个简单的解决方案，如下如下：

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

登录后复制

说明：

scrollTop 检索页面当前的垂直滚动位置。
如果scrollTop 超过 800 像素，使用底部菜单 div 可见fadeIn()。
相反，如果scrollTop低于800像素，则使用fadeOut()隐藏bottomMenu。

向上滚动的增强：

为了增强这个解决方案，我们可以添加在向上滚动且滚动高度较小时隐藏底部菜单的功能大于 800px：

if (y < 800 && $('.bottomMenu').css('display') !== 'none') {
    $('.bottomMenu').fadeOut();
}

登录后复制

这个附加条件可确保底部菜单在向上滚动且滚动高度小于 800px 时保持隐藏状态。

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