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

-- View Demo --

在身高的X％后显示div

2 个答案: