Question

我正在尝试将固定在页面顶部的标题仅在用户向下滚动到页面顶部的其他内容（即我的“blackbox”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;
}

Answer 1

你可以使用jQuery。

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

以下是JSFiddle的示例 - LIVE DEMO （滚动右下角的窗口以查看演示中的演示）

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

Answer 2

参考这篇文章：

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

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

Answer 3

您可以使用JQUERY。

假设您正在滚动页面。

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

LIVE DEMO

更多关于：.scroll() .scrollTop()

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

3 个答案: