2

Webの最も高いゾーンにメニューがありますが、一番上にはありません。ユーザーがページをスクロールしたときにページが一番上に表示されたままになるようにしたいのですが、代わりにページが消える場合に限ります。タイトルが表示されている場合は、その下の、見かけ上の静的な位置にメニューが必要です。

JavaScriptなしで、cssだけで可能ですか？ウェブサイトで見ていますが、どこにあるのか覚えていません。

よろしくお願いします（そして私の醜い英語でごめんなさい！）;）

4

2 に答える 2

5

これがあなたが探しているものだと思います：https ：//jsfiddle.net/QuVkV/2/

ここでhtml構造：

<div id='wrapper'>
    <div id='upper'>This is upper content</div>
    <div id='position-saver'>
        <div id='bar'>This is the menu bar</div>
    </div>
    <div id='lower'>This is some content lower than the menu bar</div>
</div>

これはcssです：

#wrapper {
    width: 100%;
    height: 2000px;
}

#upper {
    width: 100%;
    height: 100px;
}

#position-saver {
    height: 50px;
    width: 100%;
}

#bar {    
    position: static;
    height : 50px;
    width: 100%;
}

そしてここにjavascriptがあります：

$(document).on('scroll', function(){
    if ($('#bar')[0].offsetTop < $(document).scrollTop()){
        $("#bar").css({position: "fixed", top:0});            
    }
    if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
        $("#bar").css({position: "static", top: 0});           
    }            
});
于 2012-05-09T17:42:21.497 に答える
0

よくわかりませんが、多くのサイトでこの種のことを見てきました。9gag.comに1つ

positionとにかく、 cssのプロパティを使用できます。

このように：JSFiddle

#scroll-me{ 
    width:100%;
     height:100px; 
     background:#333;
     position: fixed;
     top:15px;
     }

scroll-me divのposition:fixedwithtop:15pxは、常に15px上になります

于 2012-05-09T17:25:58.660 に答える