ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery はスクロール バーに続く固定サイドバーを実装します (IE6 と互換性があります)_jquery

Jquery はスクロール バーに続く固定サイドバーを実装します (IE6 と互換性があります)_jquery

WBOY
WBOYオリジナル
2016-05-16 16:53:461349ブラウズ

一部のショッピング Web サイトでは、この機能を使用してショッピング カートや商品カテゴリのナビゲーションを配置し、商品ページが非常に長い場合でもサイドバーが常にその役割を果たすことができます。一部の Web サイトでは、この機能を使用してサイドバーに広告を配置します。

jQuery コード:

コードをコピー コードは次のとおりです:

var rollSet = $('#Roll');// オブジェクトを確認します。#sidebar-tab はスクロールバーで固定する ID で、必要に応じて変更できます
var offset = rollSet.offset ();
$( window).scroll(function () {
// オブジェクトの上部がブラウザの表示範囲内にあるかどうかを確認します
varscrollTop = $(window).scrollTop( );
if(offset.top < ;scrollTop){
rollSet.addClass('fixed');
}else{
rollSet.removeClass('fixed');
}
});

CSS コード:
コードをコピー コードは次のとおりです

.fixed{position:fixed; top:20px;}
.fixed{_position:absolute; _top:expression((20 (noValue = document.documentElement.scrollTop ? document. documentElement.scrollTop : document.body.scrollTop)) 'px' );}//IE6 と互換性があります
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。