如何根据用户在页面上向上或向下滚动的距离使对象出现和消失？答案

【问题标题】：How can I make objects appear and disappear based on how far up or down the user has scrolled on the page?如何根据用户在页面上向上或向下滚动的距离使对象出现和消失？
【发布时间】：2013-04-18 16:36:42
【问题描述】：

我正在尝试使固定在页面顶部的标题仅在用户向下滚动到页面顶部的其他内容（即我的“黑盒”div）时才出现。如果我能让标题也能正常工作，我可能想对网站上的其他内容使用相同的效果，但我们会看到。

.header{
background:yellow; 
width:100%;
height:70px;
position:fixed;
top:0px;
box-shadow: 2px 5px 10px rgba(0,0,0,0.2);
z-index: 10;
}

.blackbox{
background:black;
width:100%;
height:350px;
top:60px;
overflow:hidden;
position:fixed;
z-index:3;
}

.homespace{
width:100%;
background:green;
height:700px;
position:relative;
margin-top:0px;
z-index:8;
}

【问题讨论】：

如果您认为自己得到了正确答案，请您将其标记为已接受 :) 谢谢！

标签： html css effects jquery-effects

【解决方案1】：

您可以使用 JQUERY。

假设您正在滚动页面。

$(document).scroll(function(){
    if($(document).scrollTop()>"100")
      //after you've scrolled 100 pixels...
      $("#something").show();
});

LIVE DEMO

更多信息：.scroll().scrollTop()

【讨论】：

【解决方案2】：

参考这篇文章：

How to get the number of pixels a user has scrolled down the page?

基本上确定用户滚动了多远，将该值与“黑盒”的高度进行比较，然后让 JS 应用一个类或使用 jQuery 之类的东西来隐藏（）或显示（）。

【讨论】：

【解决方案3】：

您可以为此使用 jQuery。

$(document).ready(function(){
    $(window).scroll(function () {
       $('.blackbox').fadeIn();
        if($(this).scrollTop()==0){
         $('.blackbox').fadeOut();
        }
    });
});

这是 JSFiddle 上的一个示例 - LIVE DEMO（滚动右下角窗口以查看实际演示）

.scroll() 和 scrollTop() 等 jQuery 方法就是您所需要的。它们会让您的生活变得轻松。

【讨论】：