<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>防腾讯固定导航栏</title> <style type="text/css"> //css经他界面布局 *{ margin:0;padding:0; } .header{ 1000px; margin-left: 230px; } .main{ 1000px; margin:0 auto; margin-top: 20px; } </style> //jQuery函数库的导入 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> //jQuery的实现 <script type="text/javascript"> $(function () { var H = $(".top").height(); $(window).scroll(function () { var docSccrollTop = $(document).scrollTop(); if(docSccrollTop > H){ $(".nav").css({"position":"fixed","top":0}); $(".main").css("margin-top",106); }else{ $(".nav").css({"position":"static"}); $(".main").css("margin-top",20); } }); }); </script> </head> <body> <div class="header"> <div class="top"> <img src="img/top.png" /> </div> <div class="nav"> <img src="img/nav.png" /> </div> </div> <div class="main"> <img src="img/main.png" /> </div> </body> </html>
当我们滑动页面的时候,如果滑动的高度正好等于顶部视图高度时,我们就给nav个定位,将它固定在一个位置不变
$(".nav").css({"position":"fixed","top":0});