ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryメニューがスクロールバーによる位置決めモードに変更(ブラウザ上部に固定)_jquery

jQueryメニューがスクロールバーによる位置決めモードに変更(ブラウザ上部に固定)_jquery

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

自分で書いてみました:

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

$(function () {
//配置する要素とブラウザの上部の間の距離を取得します
var navH = $(".nav").offset().top;
//スクロールバーevent
$(window ).scroll(function(){
//スクロールバーのスライド距離を取得します
var scroH = $(this).scrollTop();
//スクロールバーのスライド距離を取得しますスクロールバーの距離は、ブラウジングからの位置決めされた要素の距離以上です コンテナの上部からの距離は固定されています、それ以外の場合は固定されません
if(scroH>=navH){
$ (".nav").css({"position":"fixed","top":0 ,"left":"50%","margin-left":"-200px"}); else if(scroH$(".nav").css({"position":"static","margin":"0 auto"});
}
})
})

主なアイデア
1. 要素が可視領域に入った後、可視領域から出た後、配置方法が変更されます。
2. 要素がブラウザの上部で元の高さに戻ったら、その配置方法を復元します l
オンライン デモ:
http://demo.jb51.net/js/2012/myfix/ デモのダウンロード:
http://www.jb51.net/jiaoben/45053.html
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。