自分で書いてみました:
$(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
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
