http://www.devbridge.com/projects/autocomplete/jquery/
左側のサイドバーは、最初はページの下部に印刷されますが、スクロールすると、ビューポートの上部を超えて消えるのではなく、上部に移動して留まります。私はこれをたくさん見てきました。
http://www.devbridge.com/projects/autocomplete/jquery/
左側のサイドバーは、最初はページの下部に印刷されますが、スクロールすると、ビューポートの上部を超えて消えるのではなく、上部に移動して留まります。私はこれをたくさん見てきました。
ページのスクロールトップが、スクロールする 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 に設定するクラスです。
sticky.js jQuery プラグインを確認してください。派手すぎる必要がない場合は、そのようなことを非常にうまく処理します。
その背後にある原則は、要素のコンテナーでのスクロールをチェックすることです。特定のスクロール レベルに達すると修正されます。
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');
}
});