<html lang="en"> <head> <meta charset="UTF-8"> <title> 向上滑动导航固定头部 </title> <style type="text/css"> * { margin: 0; padding: 0; } .title { width: 100%; height: 20px; margin-bottom: 30px; } .nav { width: 100%; height: 20px; background: #CDDC39; } .main { width: 100%; height: 2000px; } /*实现ie6不支持fixed方法*/ .navFixed { position: fixed; left: 0; top: 0; _position: absolute; top: expression((offsetParent.scrollTop)+0); z-index: 2; } </style> </head> <body> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var headHeight = $(".title").height() + 30; //title高度加margin-bottom值 var nav = $(".nav"); $(window).scroll(function() { if ($(this).scrollTop() > headHeight) { nav.addClass("navFixed"); } else { nav.removeClass("navFixed"); } }) }) </script> <div class="title"> 固定到头部了 </div> <div class="nav"></div> <div class="main"> <br> <br> <br> <br> <br> <br> <br> 向上滑动黄色快可以固定到顶部哦~ </div> </body> </html>
