效果:鼠标向下滚动后,导航栏在屏幕上置顶固定。
下滚后,
HTML:
- <div id="navi">
- <ul id="nav">
- <li><a href="home">首页</a></li>
- <li><a href="life">走进航大</a></li>
- <li><a href="direction">报考指南</a></li>
- <li><a href="college">学院介绍</a></li>
- <li><a href="type">招生类型</a></li>
- </ul>
- </div>
CSS:
- .full{ position: fixed; top: 0;z-index: 10000; width:100%;background-color: #2778af;float:left;height:40px;}
- .fixed{ position: fixed; top: 0; width: 1215px !important;left: 0;right:0; margin:auto !important; z-index: 10000; background-color: #2778af ;float:none !important; }
JQuery:
- <script>
- $(document).ready(function() {
- var navOffset=$("#nav").offset().top;
- $(window).scroll(function(){
- var scrollPos=$(window).scrollTop();
- if(scrollPos >=navOffset){
- $("#nav").addClass("fixed");
- $("#navi").addClass("full");
- }else{
- $("#nav").removeClass("fixed");
- $("#navi").removeClass("full");
- }
- });
- });
- </script>
联系客服