2

ページの上部に固定されているヘッダーは、ユーザーがページの上部にある他のコンテンツ (つまり、「ブラックボックス」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;
}
4

3 に答える 3

1

JQUERYを使用できます。

ページをスクロールしているとしましょう。

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

ライブデモ

詳細: .scroll() .scrollTop()

于 2013-04-18T16:58:06.040 に答える
0

この投稿を参照してください：

ユーザーがページを下にスクロールしたピクセル数を取得する方法は?

基本的に、ユーザーがスクロールした距離を判断し、その値を「ブラックボックス」の高さと比較してから、JS にクラスを適用させるか、jQuery などを使用して hide() または show() にします。

于 2013-04-18T16:57:34.023 に答える