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


Posted in jQuery onMay 26, 2017

实现效果图:

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
Jquery Fade用法详解
Nov 06 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 #jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 #jQuery
jquery.masonry瀑布流效果
May 25 #jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 #jQuery
jquery Form轻松实现文件上传
May 24 #jQuery
You might like
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
vue-router单页面路由
2017/06/17 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
基于Python log 的正确打开方式
2018/04/28 Python
20行python代码实现人脸识别
2019/05/05 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python的Jenkins接口调用方式
2020/05/12 Python
python关于倒排列的知识点总结
2020/10/13 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
财务会计应届生求职信
2013/11/24 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
结婚堵门保证书
2015/05/08 职场文书
个人催款函范文
2015/06/24 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
《正比例》教学反思
2016/02/23 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
详解python的异常捕获
2022/03/03 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android