1、描述
窗口滚动一定高度之后才让导航栏固定
2、要点
浏览器滚动的事件：$(window).scroll(functiuon(){
文档滚过的高度： $(doucment).scrollTop();
});
3、代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .content{ width:1001px; margin: 0 auto; } .f{ position:fixed; top:0; left:0; } </style> <script src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ var topHeight=$(".top").height(); console.log(topHeight); //窗口滚动事件 $(window).scroll(function(){ if($(document).scrollTop()>=topHeight){ //css定位 $(".nav").addClass("f"); $(".content").css("margin-top",$(".nav").height()); }else { $(".nav").removeClass("f"); $(".content").css("margin-top",0); } }); }); </script> </head> <body> <div class="top"> <img src="img/top.png" /> </div> <div class="nav"> <img src="img/nav.png"/> </div> <div class="content"> <img src="img/main.png"/> </div> </body> </html>