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  THIS详解 面向对象
Mar 25 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
javascript文本模板用法实例
Jul 31 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
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
WHOIS类的修改版
2006/10/09 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
javascript数组详解
2014/10/22 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python实现新浪博客备份的方法
2016/04/27 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python装饰器用法实例分析
2019/01/14 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python