1

http://www.devbridge.com/projects/autocomplete/jquery/

左側のサイドバーは、最初はページの下部に印刷されますが、スクロールすると、ビューポートの上部を超えて消えるのではなく、上部に移動して留まります。私はこれをたくさん見てきました。

4

3 に答える 3

2

ページのスクロールトップが、スクロールする div の上部の位置よりも大きい場合は、その div に固定位置を指定して、ページを下にスクロールするようにします。

例:

ここでは、ユースケースで変更されないため、最上位をハードコーディングしました。

var $window = $(window), $menu = $("#menu");
$window.bind('scroll', function() {
    var pos = +$window.scrollTop();
    if (pos > 284) {
        $menu.addClass("fixed");
    }
    else {
        $menu.removeClass("fixed");
    }
}).trigger("scroll");​

ここで、fixed は、position を fixed に、top を 0 に設定するクラスです。

于 2012-05-22T19:38:31.003 に答える
0

sticky.js jQuery プラグインを確認してください。派手すぎる必要がない場合は、そのようなことを非常にうまく処理します。

その背後にある原則は、要素のコンテナーでのスクロールをチェックすることです。特定のスクロール レベルに達すると修正されます。

于 2012-05-22T19:41:56.903 に答える
0

jQuery を使用して、scroll-Listener をドキュメントに追加します。

$(document).scroll(function() {

});

その関数内で、ドキュメントの scrollHeight が要素の y 位置よりも大きいかどうかを確認します。

if($(document).scrollTop() < $('.sidebar').offset().top) {
    // here you change the css attributes position to fixed and top to 0
    $('.sidebar').css('position', 'fixed').css('top', 0);
} else {
    // change the position of the element to relative (default)
    $('.sidebar').css('position', 'relative');
}

これはほとんど機能しますが、常に固定要素の位置を確認するため、y 位置は常に 0 です。機能させるには、デフォルトの y 位置を保存するだけです。これは私も使用しているコードです:

var initial_y = $('.sidebar').offset().top;

$(document).scroll(function() {
    $e = $('.sidebar');
    if(initial_y - $(document).scrollTop() <= 0) {
        $e.css('position', 'fixed').css('top', 0);
    } else {
         $e.css('position', 'relative');
    }
});
于 2012-05-22T19:47:17.693 に答える