js实现导航吸顶效果

 更新时间:2017年02月24日 14:16:47   作者:892852158   我要评论
本文主要分享了js实现导航吸顶效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧

话不多说,请看代码:

<!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>

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

相关文章

  • iphone safari不支持position fixed的解决方法

    iphone safari不支持position fixed的解决方法

    最近一直在做移动web开发,开发过程中遇到了许多问题,mobile safari不支持position: fixed就是一件很头疼的事情
    2012-05-05
  • 根据表格中的某一列进行排序的javascript代码

    根据表格中的某一列进行排序的javascript代码

    根据表格中的某一列进行排序的实现方法有很多,下面为大家介绍下如何使用js来简单实现下,需要的朋友不要错过
    2013-11-11
  • webpack处理 css\less\sass 样式的方法

    webpack处理 css\less\sass 样式的方法

    本篇文章主要介绍了webpack处理 css\less\sass 样式的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 分析JS单线程异步io回调的特性

    分析JS单线程异步io回调的特性

    这篇文章主要分析了javascript单线程异步io回调的特性这个问题,希望我们整理的内容能帮助到你。
    2017-12-12
  • JavaScript时间戳与时间日期间相互转换

    JavaScript时间戳与时间日期间相互转换

    今天做项目遇到这样的问题,要将获取到的时间转换为时间戳,通过查阅相关资料,问题顺利解决,下面小编把具体实现代码分享到脚本之家平台,需要的朋友参考下
    2017-12-12
  • 微信小程序 弹窗自定义实例代码

    微信小程序 弹窗自定义实例代码

    这篇文章主要介绍了微信小程序 弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下
    2017-03-03
  • 原生js实现移动开发轮播图、相册滑动特效

    原生js实现移动开发轮播图、相册滑动特效

    原生JS实现图片自动轮播缓冲切换特效,很实用流畅的图片轮播特效,在较现代的浏览器上展现的圆角效果,兼容差点的是直角效果,全部原生JS实现,还是很不错的值得大家学习并利用,推荐下载。
    2015-04-04
  • director.js实现前端路由使用实例

    director.js实现前端路由使用实例

    这篇文章主要介绍了director.js实现前端路由使用实例,director.js是最纯粹的路由注册/解析器,它在不刷新页面的情况下,利用“#”符号组织不同的URL路径,需要的朋友可以参考下
    2015-02-02
  • Bootstrap源码解读媒体对象、列表组和面板(10)

    Bootstrap源码解读媒体对象、列表组和面板(10)

    这篇文章主要源码解读了Bootstrap媒体对象、列表组和面板,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS中数组与对象的遍历方法实例小结

    JS中数组与对象的遍历方法实例小结

    这篇文章主要介绍了JS中数组与对象的遍历方法,结合实例形式总结分析了JavaScript针对数组与对象遍历操作相关函数与使用技巧,需要的朋友可以参考下
    2018-08-08

最新评论