微智科技网
您的当前位置:首页jQuery导航条固定定位效果的实现方法

jQuery导航条固定定位效果的实现方法

来源:微智科技网
 本文主要介绍了jQuery导航条固定定位效果实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

实现效果图:


向下滑动时,导航栏固定

代码:


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0; 
 }
 img{
 display: block;
 margin: 0 auto;
 }
 img#search.dhgd{
 position: fixed;
 left: 50%;
 margin-left: -596px;
 top: 0px;
 }
 </style>
 <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 $(function(){
// 给浏览器加滚动条事件
 $(window).scroll(function(){
 //获得当前已滚动上去的距离
 var t = $(document).scrollTop();
 console.log('=================='+t)
 if(t>126){
 $("#search").addClass('dhgd');
 }else{
 $("#search").removeClass('dhgd');
 }
 })
 })
 </script>
 </head>
 <body style="background: #F1F1F1;">
 ![](imgs/img01.png)
 ![](imgs/img02.png)
 ![](imgs/img03.png)
 </body>
</html>
显示全文