首页 > 代码库 > 垂直滚动条滑到页面里面的导航栏时，导航栏固定到窗口顶部
垂直滚动条滑到页面里面的导航栏时，导航栏固定到窗口顶部
如标题，这个功能，有很大的实用性，通过样式以及JS，还是比较容易实现的。
不多说了，直接上代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>菜单导航可悬浮在顶部</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <script type="text/javascript" src=http://www.mamicode.com/"js/jquery-3.1.0.js"></script> 7 </head> 8 <body> 9 <style type="text/css">10 * {11 padding:0;12 margin: 0;13 } 14 .nav {border:1px solid green; position:relative;height:50px;}15 .nav ul{list-style-type:none;height:50px;background:gray;}16 .nav ul li{float:left;width:158px;text-align:center;height:50px;line-height:50px;}17 .nav ul li a:link{color:white;text-decoration:none;}18 .nav ul li a{display:block;}19 .nav ul li a:hover{background:#f60;}20 .nav_fix_pos {21 position:fixed;top:0px;left:0px;width:100%;22 background: blue;23 }24 </style>25 <div style="margin:10px 150px 10px 150px; color: #00ff99;">26 <h2>27 <br/>开发流程28 <br/>29 <br/>1）获取用户授权(这个做不做没有啥关系，反正我还没做呢)30 <br/>2）调用统一下单接口获取预支付id31 <br/>3）H5调起微信支付的内置JS32 <br/>4）支付完成后，微信回调URL的处理33 </h2>34 <div style="margin-top: 300px;"></div> 35 </div>36 <div class="clearfix">37 <div class="nav">38 <ul>39 <li><a id=".product_menu1" style="cursor: pointer;">产品介绍</a></li>40 <li><a id="#idcase" style="cursor: pointer;">保险案例</a></li>41 <li><a id="#idclaim" style="cursor: pointer;">理赔服务</a></li>42 <li><a id="#idfaq" style="cursor: pointer;">常见问题</a></li>43 <li><a id="#idappraise" style="cursor: pointer;">累计评价(<span id="commentAllCount">23</span>条)</a></li>44 <li><div id="ljgm" class="ljgm" onclick="buyFunc()" style="display: block; z-index: 1000; top: 0px;"><a id="ljgma" href=http://www.mamicode.com/"#">测算保费</a></div></li>45 </ul> 46 </div>47 <div style="margin-top: 300px; clear: both;"></div> 48 </div>49 <div style="margin:10px 150px 10px 150px; color: #1100ff;"> 50 <h2>继续看下面啊。。。。。。。。。。。。</h2>51 <div style="margin-top: 300px;"></div>52 <h2>继续看下面啊。。。。。。。。。。。。</h2>53 <div style="margin-top: 300px;"></div>54 <h2>继续看下面啊。。。。。。。。。。。。</h2>55 <div style="margin-top: 300px;"></div>56 <h2>继续看下面啊。。。。。。。。。。。。</h2>57 <div style="margin-top: 300px;"></div>58 <h2>继续看下面啊。。。。。。。。。。。。</h2>59 <div style="margin-top: 300px;"></div>60 <h2>继续看下面啊。。。。。。。。。。。。</h2>61 <div style="margin-top: 300px;"></div>62 <h2>继续看下面啊。。。。。。。。。。。。</h2>63 <div style="margin-top: 300px;"></div>64 <h2>继续看下面啊。。。。。。。。。。。。</h2>65 <div style="margin-top: 300px;"></div>66 <h2>继续看下面啊。。。。。。。。。。。。</h2>67 <div style="margin-top: 300px;"></div>68 <h2>继续看下面啊。。。。。。。。。。。。</h2>69 <div style="margin-top: 300px;"></div>70 <h2>继续看下面啊。。。。。。。。。。。。</h2>71 <div style="margin-top: 300px;"></div>72 <h2>继续看下面啊。。。。。。。。。。。。</h2>73 <div style="margin-top: 300px;"></div>74 <h2>继续看下面啊。。。。。。。。。。。。</h2>75 <div style="margin-top: 300px;"></div>76 <h2>继续看下面啊。。。。。。。。。。。。</h2>77 <div style="margin-top: 300px;"></div>78 <h2>继续看下面啊。。。。。。。。。。。。</h2>79 <div style="margin-top: 300px;"></div>80 <h2>继续看下面啊。。。。。。。。。。。。</h2>81 <div style="margin-top: 300px;"></div>82 </div>83 <script>84 $(document).ready(function(){85 var nav=$(".nav"); //得到导航对象86 var win=$(window); //得到窗口对象87 var sc=$(document);//得到document文档对象。88 var navHeight = nav.offset().top; 89 win.scroll(function(){ 90 if(sc.scrollTop() >= navHeight){ 91 nav.addClass("nav_fix_pos");92 }else{93 nav.removeClass("nav_fix_pos"); 94 };95 });96 });97 </script>98 </body>99 </html>
效果图如下，先看鼠标没有拖到导航栏所在的位置时：
再来看看，滑动条拖到超过导航栏所在的位置时的效果：
垂直滚动条滑到页面里面的导航栏时，导航栏固定到窗口顶部
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。