jquery实现导航栏吸顶效果(简洁版)
憋说话,直接上代码,先是最最重要的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>声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
- 上一篇:没有了
- 下一篇:没有了
