牛骨文教育服务平台(让学习变的简单)
博文笔记

jquery实现导航栏吸顶效果(简洁版)

创建时间:2017-05-03 投稿人: 浏览次数:3801

憋说话,直接上代码,先是最最重要的js:

  $(function(){
    var a = $("#course-tab"),
      b =a.offset();//返回或设置导航栏相对于文档的偏移(位置)
  //加个屏幕滚动事件,c是滚动条相当于文档最顶端的距离
    $(document).on("scroll",function(){
      var c = $(document).scrollTop();
  /*当滚动的屏幕距离大于等于导航栏本身离最顶端的距离时(判断条件)给它加样式(根据自己业务的条件加样式,一般如下)*/
      if(b.top<=c){
        a.css({"position":"fixed","top":"0px"})
        }else{
          a.css({"position":"absolute","top":"500px"})
          }
     })
  });

html:

        <div id="course-tab">
          <ul id="myTab" class="nav nav-tabs tabswitch">
            <li class="active">
              <a class="teacher-tab-btn" href="#course-buy" data-toggle="tab">
                在售课程
              </a>
            </li>
            <li><a class="teacher-tab-btn" href="#teacher-introduce" data-toggle="tab">教师介绍</a></li>
          </ul>
        </div>


声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。