13.固定导航栏效果 · 程序员开发笔记

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } img{ display: block; margin: 0 auto; } .menu.f{ position: fixed; left: 50%; top: 0; margin-left: -480px; } </style> </head> <body> <img src="images/1.jpg" alt="" /> <img src="images/2.jpg" class="menu" /> <img src="images/3.jpg" alt="" /> <script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(window).scroll(function(){ //获得滚动上去的距离 var st = $(document).scrollTop(); document.title = st; if (st>238) { //$(".menu").css({ //'position':'fixed', //'top':'0', //'left':'50%', //'margin-left':'-480px', //}) $(".menu").addClass('f'); }else{ $(".menu").removeClass('f'); } }) </script> </body> </html>