仿照导航顶部浮动效果
我是实习生,很多东西都不懂,最近发现很多网站的导航都会一直悬挂在窗口顶部,自己学习了一下,仿照别人写出了如下例子,没做什么CSS样式,只是体现如何实现。
代码如下:
<!DOCTYPE html> <html><head><title>仿照导航顶部浮动效果</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var h = $("#header").height();//获取顶部高度 var nav = $(".nav"); $(window).scroll(function(){ if($(window).scrollTop() > h){//滚动大于顶部高度,添加置顶类 nav.addClass("navfl");
nav.removeClass("nav"); }else{
nav.addClass("nav"); nav.removeClass("navfl"); } }); }) </script> <style type="text/css"> #header{width:100%;height:80px;background:#2C9BD6;} .nav{width:100%;height:50px;border:2px solid #ff1010;color:#333} .navfl{position:fixed;left:0;margin:0;top:0;} </style> </head> <body style="zoom: 1;" contenteditable="true"> <div id="header"></div> <div class="nav"> <div style="text-align:center"><h1>this is the nav!</h1><h2></h2></div> </div> <div> <div style="text-align:center;height:300px;"><h1>1</h1><h2></h2></div> <div style="text-align:center;height:300px;"><h1>2</h1><h2></h2></div> <div style="text-align:center;height:300px;"><h1>1</h1><h2></h2></div> <div style="text-align:center;height:300px;"><h1>1</h1><h2></h2></div> <div style="text-align:center;height:300px;"><h1>1</h1><h2></h2></div> <div style="text-align:center;height:300px;"><h1>1</h1><h2></h2></div> </div> </body></html>
![](https://images2015.cnblogs.com/blog/623144/201607/623144-20160704153736327-1290497568.png)
有没有人打赏?没有的话,那我晚点再来问问。
![](https://img2018.cnblogs.com/blog/623144/201903/623144-20190319194730266-1448057040.png)
关注大诗人公众号,第一时间获取最新文章。
---转发请标明,并添加原文链接---