zoukankan      html  css  js  c++  java
  • 导航栏下拉至一定高度后固定在顶部的特效

    导航栏下拉至一定高度后固定在顶部的特效”,也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码:

    <script type="text/javascript">
    $(function(){
    var nav=$(".nav"); //得到导航对象
    var win=$(window); //得到窗口对象
    var sc=$(document);//得到document文档对象。
    win.scroll(function(){
      if(sc.scrollTop()>=100){
        nav.addClass("fixednav"); 
      }else{
       nav.removeClass("fixednav");
      }
    })  
    })
    </script>

    将这个js放到要实现效果的页面里面去,然后我们要修改的是第三行的.nav,“nav“改成你自己页面导航栏的class;第七行的”100“为下拉到100个像素的时候触发特效,可以自行修改至合适的高度。

    然后在css文件里面增加这个属性:

    .fixednav {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 999;
    }

    这样就差不多完成了。

    大概讲下这个js的意思,判断下拉到一定高度的时候,给导航栏的div插入一个”fixednav“属性,然后给”fixednav“加上固定在顶部的参数。

  • 相关阅读:
    excel 合并
    百度百科-人物数据采集
    list 元素个数*10 生成一个新的list
    mongo 备份脚本
    python excel合并脚本
    java多线程之消费生产模型
    Lasso回归
    岭回归
    普通最小二乘法
    常问的MySQL面试题整理
  • 原文地址:https://www.cnblogs.com/JurasVon/p/11727954.html
Copyright © 2011-2022 走看看