js实现导航吸顶效果


Posted in Javascript onFebruary 24, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>38demo</title>
    <link rel="stylesheet" href="img/mobile-reset.css" rel="external nofollow" />
    <style type="text/css">
      html,body{
        width:100%;
        height:100%;
      }
      .title{
        width:100%;
        margin-bottom:20px;
        background: #fff;
      }
      .titleTap{
        position:fixed;
        left:0;
        top:0;
      }
      .a1{
        margin-top:20px;
      }
      .title li{
        width:33%;
        float:left;
        text-align: center;
      }
      .content{
        text-align: center;
        margin-top:20px;
        z-index:100;
      }
    </style>
  </head>
  <body>
    <!--other-->
    <div class="topHeight">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
    </div>
    <!--title-->
    <ul class="title clearfix">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <!--content-->
    <ul class="content a1">
      <li>11</li>
      <li>13</li>
      <li>14</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
    </ul>
    <ul class="content a2">
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
    </ul>
    <ul class="content a3">
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
    </ul>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>    
    function nav(){
      var height=0;
        height = $(".topHeight").height();
      $(window).scroll(function() {
        var w = $("body").scrollTop() || $(document).scrollTop(); //获取滚动值
        if(w > height) {
$(".title").addClass("titleTap");
        } else if(w <= 0){
$(".title").removeClass("titleTap")
        }else{
$(".title").removeClass("titleTap")
        }
      });
    }
    nav();
      $(function() {
        $(".title li").click(function() {
          var index = $(this).index();
          var offsetH = $(".content").eq(index).offset().top;
          console.log(index);
          console.log(offsetH);          $("body").animate({
scrollTop: offsetH-20,
          }, 500);
        })
      })
    </script>
  </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
canvas绘制多边形
Feb 24 #Javascript
angularjs实现多张图片上传并预览功能
Feb 24 #Javascript
Angularjs分页查询的实现
Feb 24 #Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 #Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 #Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 #Javascript
详解JS中的立即执行函数
Feb 24 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
Yii2中datetime类的使用
2016/12/17 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
php工具型代码之印章抠图
2018/07/18 PHP
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
大学生村官演讲稿
2014/04/25 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
Java8中Stream的一些神操作
2021/11/02 Java/Android