1

jqueryスクロール機能を作成しようとしています。現在、ウィンドウを使用してうまく機能していますが、div の制約内に保ちたいので、div よりも低くしたり高くしたりできません。

例：

var $scrollingDiv = $("span.top");
    $(window).scroll(function(){            
        $scrollingDiv
            .stop()
            .animate({"top": ($(window).scrollTop() + 0) + "px"}, "slow" );
    });

HTML

<div class="holder">
<span class="top">back to top</span>
<p>loads of text here</p>

http://jsfiddle.net/Jzz76/

どんな助けでも感謝します

4

2 に答える 2

1

まず、CSS を次のように変更します。

.holder span.top{
    display:block;
    z-index:999;
    right:0;
    float:right;
}

お気づきの場合は、上記の宣言からposition:absoluteandを削除しました。top:0これは、要素がまだドキュメントのフロー内に存在し、その親を超えないようにするために行われます。一番右に行くために、単純に を追加しましfloat:rightた。

次に、jQuery を次のように変更します。

$('document').ready(function(){
    var spanOffset = $('.top').offset();
    $(window).scroll(function() {
        if($(window).scrollTop() < spanOffset.top) {
            $('.top').css({ 'position': 'static'}); 
        } else {
            $('.top').css({ 'position': 'fixed', 'top': '0px'}); 
        }   
    });
});

上記のスニペットの背後にあるロジックは非常に簡単です: の現在の Y オフセットを取得し、.topそれを変数に格納します。ウィンドウがスクロールするとき、スクロールされた距離に対して Y オフセットをチェックします。ウィンドウがスクロールしない場合、 の値$(window).scrollTop()は基本的に 0 であるため、.top変更されずに親内に残ります。ウィンドウがスクロールし、 で計算されたスクロール距離$(window).scrollTop()が の現在の Y オフセットを超えると.top、 の CSS.topが変更され、ウィンドウの上部に「固定」されます。

実際の例については、 http://jsfiddle.net/Jzz76/20/を参照してください。

于 2013-04-03T04:10:30.100 に答える
-2

プラグインを使用することをお勧めします - すべての大変な作業はあなたのために行われます! 次のような軽量プラグインを見てみましょう: jQuery Scroll To

詳細はこちら: BEST JQUERY SCROLL TO TOP PLUGINS

于 2013-04-03T03:53:22.037 に答える