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

来源：动视网责编：小采时间：2020-11-27 20:06:47

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

jQuery导航条固定定位效果的实现方法:本文主要介绍了jQuery导航条固定定位效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。实现效果图：向下滑动时，导航栏固定代码：<!DOCTYPE html> <html> <head> <meta char

推荐度：

点击下载本文 文档为doc格式

导读jQuery导航条固定定位效果的实现方法:本文主要介绍了jQuery导航条固定定位效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。实现效果图：向下滑动时，导航栏固定代码：<!DOCTYPE html> <html> <head> <meta char

本文主要介绍了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>

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

推荐度：

点击下载本文 文档为doc格式

标签：定位功能导航

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐