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中用星号表示预录入内容的实现代码
Jan 08 Javascript
jQuery构造函数init参数分析
May 13 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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/04 咖啡文化
GD输出汉字的函数的分析
2006/10/09 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
python 获取et和excel的版本号
2009/04/09 Python
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python求列表交集的方法汇总
2014/11/10 Python
学习python可以干什么
2019/02/26 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
软件测试有哪些?什么是配置项?
2012/02/12 面试题
函授毕业个人自我评价
2014/02/20 职场文书
植树节标语
2014/06/27 职场文书
2014教师年度工作总结
2014/11/10 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
介绍信怎么写
2015/01/30 职场文书
免职通知
2015/04/23 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Python+tkinter实现高清图片保存
2022/03/13 Python