导航条吸顶效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="portalHeaderLink" id="nav"> <a >我要开店</a> <a >我要做代理</a> <a >登录</a> </div> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </body> <style> *{margin:0;padding:0;} .portalHeaderLink{background:red;position:fixed;top:0;width:100%;height:50px;line-height: 50px;} .portalHeaderLink a{color:#fff;} .navFixed{background:blue;} </style> <script> window.onload = function(){ $(window).scrollTop(0) var $window = $(window); var $nav = $('#nav'); var navTop = $nav.offset().top + $nav.height(); $window.scroll(function () { var scrollTop = $(document).scrollTop(); if (scrollTop >= navTop) { if (!$nav.hasClass('fixed')) { $nav.addClass('fixed').css('display', 'none').slideDown(300); $nav.addClass('navFixed') } } else { $nav.removeClass('fixed'); $nav.removeClass('navFixed') } ; }); } </script> </html>
ps:参考了别人的代码，但是在此基础上面做了一些修改，当滚动到下面刷新页面的时候，背景色仍然是蓝色。
