jQuery导航条固定定位效果实例代码

更新时间：2020-05-14 20:24:01 作者：startmvc

实现效果图：向下滑动时，导航栏固定代码：<!DOCTYPEhtml><html><head><metacharset=

实现效果图：

向下滑动时，导航栏固定

代码：


<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。