JQuery在向下滚动时隐藏/显示

JQuery Hide/Show on Scroll down

本文关键字：隐藏 显示 滚动 JQuery      更新时间：2024-03-12

我是jquery的新手。我正在尝试编写一个脚本，它将隐藏div"box"和所有子项。当用户滚动到页面底部时，会显示div"box"和所有子项。看在时间的份上，我们会说孩子们是"1号房间"、"2号房间"answers"3号房间"。

当我隐藏"盒子"时，它只删除那个分区。

$(document).ready(function() {
   $("#box").hide();
});

很抱歉缺少代码，但我很难理解这一课，而且我无法通过互联网搜索找到一个确切的例子来说明我要做什么。

谢谢！

如果您在到达页面底部时隐藏该框，您的javascript应该如下所示：

JAVASCRIPT:

$(document).ready(function() {
   $(document).on("scroll", function(){
     if ( window.scrollMaxY == window.scrollY ) {
        $("#box").hide();
     }
   })
});

HTML:

<div id="box">
  <div>Chamber 1</div>
  <div>Chamber 2</div>
  <div>Chamber 3</div>
</div>

您应该确保div具有id"box"。如果您使用的是类"box"的div，那么您将使用：

$(document).ready(function() {
  $(".box").hide();
});

我认为这可能会对您有所帮助，而且会更好地理解。下面给出了一个很好的解释和演示。

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).outerHeight() == $(document).outerHeight()) {
    //Script for activity on reaching bottom of document
    $("#box").fadeOut();
  } else // optional
  {
    $("#box").fadeIn();
  }
});
body {
  margin: 0px;
  width: 100%;
}
.container {
  position: relative;
  height: 900px;
  width: 100%;
  background: #fee;
}
#box {
  position: fixed;
  top: 50px;
  left: 0px;
  background: lightblue;
  height: auto;
  padding: 15px;
  overflow: hidden;
  max-width: 250px;
  width: 210px;
}
#box > div {
  margin: 5px;
  background: #F33636;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
</div>
<div id="box">
  Box
  <hr>
  <div class="chamber1">
    Chamber 1
  </div>
  <div class="chamber2">
    Chamber 2
  </div>
</div>

JSFiddle

你可以玩Fiddle Link。

相关文章：