コードをコピー コードは次のとおりです: 無标题文档 <br>$(document).ready(function(){ <br>var headHeight=$(".header").height() 10; <br>var nav=$(".nav"); <br> $(window).scroll(function(){ <br>if($(this).scrollTop()>headHeight){ <br>nav.addClass("navFix"); <br>} <br>else{ <br>nav.removeClass("navFix"); <br>} <br>}) <br>}) <br> <br>*{ マージン:0;パディング:0;} <br>ボディ{ _background-attachment:fixed; _background-image:url(about:blank);} //实现ie6不サポート固定メソッド <br>.header{ width:1000px;高さ:60ピクセル;マージン:0 自動; text-align:center;} <br>.nav{ border:1px Solid #ccc;境界半径:5px;オーバーフロー:非表示;高さ:30ピクセル;幅:1000ピクセル;マージン:10px 自動;背景:#fff;} <br>.nav li{ float:left;パディング:0 10px;高さ:30ピクセル; line-height:30px;} <br>.nav li a{ text-decoration:none; color:#0CF;} <br>.nav li a:hover{ color:#000; text-decoration:underline;} <br>.nav ul{ list-style:none;} <br>.navFix{position:fixed;左:0;トップ:0; _位置:絶対;トップ:式((offsetParent.scrollTop) 0); z-index:2;} //实现ie6は固定メソッド<br>.content{ width:1000px; をサポートしていません。 margin:10px auto;} <br> 导航固定在页面顶部测试 首页 蓝枫フロントエンド 蓝枫フロントエンド 蓝枫フロントエンド 蓝枫フロントエンド 蓝枫フロントエンド 蓝枫フロントエンド 蓝枫フロントエンド 11111 11111 1111111111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111