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 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
js获取和设置属性的方法
Feb 20 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP URL参数获取方式的四种例子
2014/02/28 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
js的event详解。
2006/09/06 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
实例浅析js的this
2016/12/11 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python-xpath获取html文档的部分内容
2020/03/06 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python redis存入字典序列化存储教程
2020/07/16 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
一句话工作感言
2014/03/01 职场文书
护士毕业实习感言
2014/03/05 职场文书
求职意向书
2014/04/01 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
幼儿园毕业致辞
2015/07/29 职场文书