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编程开发中的五个实用小技巧
Jul 22 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
详解用JS添加和删除class类名
Mar 25 Javascript
vue 插件的方法代码详解
Jun 06 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
ES6概念 Symbol toString()方法
2016/12/25 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
JavaScript中Object基础内部方法图
2018/02/05 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
详解Python爬虫的基本写法
2016/01/08 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
怎么写自荐书范文
2014/02/12 职场文书
《匆匆》教学反思
2014/02/22 职场文书
会议欢迎标语
2014/06/30 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
导游词之桂林山水
2019/09/20 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers