jquery - jQueryで常にトップに立つ

Question

スクロールがあってもページの上部に常に表示されるボタンを取得しようとしています.誰か助けてもらえますか?

（簡易的なケースです。位置固定は使えません）

ここで確認できます：http://jsfiddle.net/TCX6h/6/

Jクエリ:

$(function(){
    var boto = $('.boto').offset().top;
    $(window).scroll(function() {
        if (boto < 0) {
            $( '.boto' ).offset({ top: 50 });
        } 
    });
})

Answer 1

jquery で css を使用する必要はありませんposition:fixed

デモフィドル

または、次の方法で実行できます。

$(function(){
    $(window).scroll( function() {
        var boto =$(window).scrollTop() - $('.boto').offset().top;
        if (boto)
            $('.boto').addClass('top');
        else
            $('.boto').removeClass('top');
    } );
})

CSS:

.boto.top {
    position: fixed;
    top: 0;
}

デモフィドル

Answer 2

あなたの（元の、編集されていない）コードが機能しない理由に関しては、

1. botoを指す$('#boto').offset().topのではなく、その値を格納するだけです。
2. ==は代入ではなく、論理比較です (つまり、 の値をboto == 0与えるのではなく、それを比較して/を返すだけです)。boto00truefalse
3. .offset()それは位置を設定 するために使用する方法ではありません: http://api.jquery.com/offset/
4. .offset()ビューポートに対してではなく、ドキュメントに対して相対的に機能します

試す：

$(function(){
    var boto = $('#boto');
    $(document).scroll(function() {
        boto.offset({top: document.body.scrollTop});
    });
});

http://jsfiddle.net/BYossarian/TCX6h/7/

Answer 3

はい @ RAM は正しいです。これを確認してください

#background {
position:fixed;
top:0;
    ...

フィドル

Answer 4

ボタンに絶対位置ではなく固定位置を与える

    .boto{
    position:fixed;
    top: 0px; left:50%;
    margin-left:-115px;
    width:30px; height:20px;
    cursor:pointer;

    background:yellow;
    padding:30px 100px;
}

フィドル