项目中遇到比较多的的文档内容,为了方便查找里面的小内容,一般都会在左侧或者右侧放一个固定楼层的导航栏,今天就来说一下这个固定楼层导航栏的思路以及实现的方法。先来看一下效果:
看完效果,相信大家对于这个固定楼层导航栏的意思就略知一二了。确实,我们其实要实现三个功能。
其一:固定导航栏滚动到一定位置出现,否则就消失
其二:当我们滚动页面的时候,滚动到相应的位置时,相应的楼层导航栏的位置也要进行改变
其三:当我们点击楼层导航的时候,窗口能够自动滚动到相应的位置
在说如何实现这个功能之前,我得强调一个知识点,就是$(document).scrollTop()和$(window).scrollTop()的区别。因为很多人觉得文档滚动距顶的高度和窗口滚动距顶的高度相同,那么这两个的用法也一定相同,但是我想说的是,如果没有把这两个用法真正地区分,很容易在项目中混淆思路。
首先,这两个得到的滚动高度是没有区别的;
其次,用来设置是,scrollTop(value),但是只有$(window).scrollTop(100)是有效的,并且这个浏览器的兼容性也更强
最后,另外一个获取$('html,body').scrollTop(),这个里面不能穿参数
然后还要强调一个知识点offset().top,这个是指 元素与document 的上边的距离
接下来说说这个楼层固定导航栏的思路和做法。
先来说一下上面三个功能的思路:
1.对应其一,根据上文描述,其思路就是判断窗口的滚动高度是否大于一定高度,大于就把固定导航栏显示,否则就隐藏
2.对应其二,其思路是窗口滚动触发事件,分别得到窗口滚动的高度,以及每个导航对应内容的高度,依次判断窗口滚动的高度是否大于导航栏对应内容的高度,如果符合条件的话,固定导航栏就滚动到相应的位置。
3.对应其三,其思路是点击导航栏时触发事件,得到导航栏选中对象的index值或者是能够辨别内容的值,然后就对应滚动到对应内容区域的顶部
最后来说一下这个做法,也就是代码是如何实现的,为了简便操作,方便了解思路,我就做了一个比较简单的Demo,以供参考:
<div class="boxWrap">
<div class="floor bg_blue" data-floor="1">1F</div>
<div class="floor bg_pink" data-floor="2">2F</div>
<div class="floor bg_red" data-floor="3">3F</div>
<div class="floor bg_black" data-floor="4">4F</div>
<div class="floor bg_green" data-floor="5">5F</div>
</div>
<div class="fixFloor">
<ul class="cf">
<li class="subFloor cf active"><p class="floorNum">1F</p><p class="floorExpression bg_blue">商家</p></li>
<li class="subFloor cf"><p class="floorNum">2F</p><p class="floorExpression bg_pink">类目</p></li>
<li class="subFloor cf"><p class="floorNum">3F</p><p class="floorExpression bg_red">热门</p></li>
<li class="subFloor cf"><p class="floorNum">4F</p><p class="floorExpression bg_black">资讯</p></li>
<li class="subFloor cf"><p class="floorNum">5F</p><p class="floorExpression bg_green">服务</p></li>
</ul>
</div>
这一段主要是Html的内容,大致的结构就是这样的,下面就是js的实现过程,分别对应上述思路,可以简单了解一下。
<script>
$(".subFloor").on("click",function(){
$(this).addClass('active').siblings().removeClass('active');
});
$(window).scroll(function(){
if($(document).scrollTop()>170){
$(".fixFloor").show();
}
else{
$(".fixFloor").hide();
}
var sTop = $(window).scrollTop() + 400;
var floor1 = $(".floor[data-floor='1']").offset().top;
var floor2 = $(".floor[data-floor='2']").offset().top;
var floor3 = $(".floor[data-floor='3']").offset().top;
var floor4 = $(".floor[data-floor='4']").offset().top;
var floor5 = $(".floor[data-floor='5']").offset().top;
if(sTop > floor1){
$(".subFloor").eq(0).delay(300).addClass("active").siblings("li").removeClass("active");
}
if(sTop > floor2){
$(".subFloor").eq(1).delay(300).addClass("active").siblings("li").removeClass("active");
}
if(sTop > floor3){
$(".subFloor").eq(2).delay(300).addClass("active").siblings("li").removeClass("active");
}
if(sTop > floor4){
$(".subFloor").eq(3).delay(300).addClass("active").siblings("li").removeClass("active");
}
if(sTop > floor5){
$(".subFloor").eq(4).delay(300).addClass("active").siblings("li").removeClass("active");
}
});
$(".subFloor").on("click",function(){
var floor = $(this).index();
$("body").animate({scrollTop:($(".floor").eq(floor).offset().top)},50);
});
</script>