Question

我是jquery的新手。我试图编写一个隐藏div＆＃34; box＆＃34;的脚本。和所有的孩子。当用户滚动到页面底部时，div＆＃34; box＆＃34;和所有的孩子们展示。为了时间的缘故，我们会说孩子们是＆＃34; chamber1＆＃34;，＆＃34; chamber2＆＃34;和＆＃34;室3＆＃34;。

当我隐藏＆＃34;框＆＃34;时，它只删除该div。

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

对于缺乏代码感到抱歉，但我无法理解本课程，而且无法找到我通过互联网搜索尝试做的确切示例。

谢谢！

Answer 1

如果您在到达页面底部时隐藏该框，则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>

Answer 2

你应该确保div有id＆＃34; box＆＃34;。如果你正在使用一个班级＆＃34;框＆＃34;然后你会用：

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

Answer 3

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

td:last-of-type{
    background: #eaebec;
}

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

<强> JSFiddle

你可以玩Fiddle Link。

向下滚动JQuery隐藏/显示

3 个答案: