jquery - 在身体高度的 X% 之后显示 div

Question

在滚动了 300px 的页面高度后，如何调用 div 以将其显示在顶部（搜索栏和一些功能）？

我想要实现的是，当用户滚动时，在某个点显示另一个包含一些工具的 div。

Answer 1

可能这就是你要找的东西：

JavaScript

$(document).ready(function () {
  $('#my-div').hide();
});
$(document).scroll(function (e) {
    if (document.body.scrollTop >= 300) {
       $('#my-div').show(200);
    } else {
      $('#my-div').hide(200);
    }
});

CSS

#my-div {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 300px;
}
body {
  height: 11100px;
}

HTML

<div id="my-div">
  Search: <input type="text" />
</div>

演示：http: //jsbin.com/welcome/49824

Answer 2

用于.scroll()触发事件，并用于.scrollTop()计算从页面顶部滚动的高度。

然后根据这个值，显示/隐藏工具：

 $(document).scroll(function(){
        if (document.body.scrollTop>300){
            $(".tools").show();
       } else
       {
           $(".tools").hide();
       }
    });

-- 查看演示 --