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.masonry瀑布流效果
May 25 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
基于jquery实现五星好评
Nov 18 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
用php来检测proxy
2006/10/09 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
Python PIL库图片灰化处理
2020/04/07 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
房屋继承公证书
2014/04/10 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
关于颐和园的导游词
2015/01/30 职场文书
优秀员工自荐书
2015/03/06 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
MySQL视图概念以及相关应用
2022/04/19 MySQL
Python使用永中文档转换服务
2022/05/06 Python