如何在 800px 之后滚动显示 Div？

在 800px 后向下滚动时显示 Div

简介

本文将解决向下滚动超过指定点时显示隐藏 div 的问题在网页上。目标是在用户从页面顶部滚动 800 像素后完成此操作，同时确保向上滚动时 div 被隐藏且滚动高度小于 800 像素。

HTML 结构

相关 div 的 HTML 如下：

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

CSS样式

以下CSS应用于div：

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

jQuery脚本

最初提供的jQuery脚本：

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

修订的jQuery脚本想要实现所需的功能

要实现所需的功能，jQuery 脚本需要修改如下：

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

结论

这个修改后的 jQuery 脚本将在从页面顶部向下滚动超过 800 像素后显示 div。向上滚动且滚动高度小于 800 像素时，div 将被隐藏。

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