首页 >web前端 >css教程 >如何在向下滚动 800px 之后显示 Div 并在向上滚动时隐藏它?

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

Barbara Streisand
Barbara Streisand原创
2024-12-13 05:52:08993浏览

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();
  }
});

说明:

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

向上滚动的增强:

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

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

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn