2

ページの上部、見出しバーのすぐ下に div を配置しています。ユーザーが下にスクロールしてバーが上がると、ブラウザウィンドウの端までしか上がらず、固定されているかのようにそこにとどまります。

そんなことがあるものか？CSSのみで実現可能ですか、それともjQueryが必要ですか? ブラウザー間の互換性のために jQuery を使用したいと思います。

これは、私がこれまでに使用しているプレーンでシンプルな css コードです。

#fbLikeDiv
{
    position: fixed;
    top: 95px;
    left: 10px;
}

次のサイトもご覧ください: www.myskoob.com/postish/ - ユーザーが下にスクロールしたときにブラウザー ウィンドウの上端に留まりたいのは、左の Facebook のようなボックスに関するものですが、最初に移動します。そこまで。

4

1 に答える 1

12

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

jQueryを使用する必要があります。上記の例では、div の後に id="bar" を続けます。

ここでhtml構造：

<div id='wrapper'>
    <div id='upper'>This is upper content</div>
    <div id='position-saver'>
        <div id='bar'>This is your facebook like button</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-21T13:27:01.777 に答える