楼层直达效果解读

最新推荐文章于 2020-06-07 20:15:43 发布

开发转测试

最新推荐文章于 2020-06-07 20:15:43 发布

阅读量388

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fulq1234/article/details/78124989

当页面滚动到某个位置的时候，左侧的楼层直达div显示到对应位置，

楼层直达div

<div class="elevator" style="display: block;">
	<div class="floor">
		<p>楼层直达</p>
		<ul>
			<li class="rf1">
				<i class="icon"></i>
				<span class="text">日用百货</span>
			</li>
			<li class="rf2">
				<i class="icon"></i>
				<span class="text">汽车用品</span>
			</li>
			<li class="rf3">
				<i class="icon"></i>
				<span class="text">服饰鞋包</span>
			</li>
			<li class="rf4">
				<i class="icon"></i>
				<span class="text">食品饮品</span>
			</li>
			<li class="rf5 cur">
				<i class="icon"></i>
				<span class="text">家饰家纺</span>
			</li>
		</ul>
		<div class="gotop">
			<a href="#">
				<i class="icon"></i>返回顶部
			</a>
		</div>
	</div>
</div>

核心楼层直达效果js

$(document).ready(function(){
	$('.nav_sub_l li').hover(//楼层直达div鼠标滑过效果
			function(){
				var obj = $(this).children(".list_item");
				obj.css('display','block');
				$(this).addClass("cur");
			},
			function(){
				var obj=$(this).children(".list_item");
				obj.css('display','none');
				$(this).removeClass("cur");
			});
	$('div.elevator li').click(function(){//楼层直达的点击效果
		var ind=$('div.elevator li').index(this)+1;//传递一个DOM对象(this)，返回这个对象在原先集合中的索引位置
		var topVal=$('.floor_'+ind).offset().top;
		$('body,html').animate({scrollTop:topVal-41},500);
	})
	$('.gotop').click(function(){
		$('body,html').animate({scrollTop:0},500);
	});
	$(window).scroll(scrolls);
});
function scrolls(){
	var f1,f2,f3,f4,f5,f6,f7,f8,f9,f10,f11,f12,f13;
	var sTop=$(window).scrollTop();//网页滚动条高度
	var liItem=$('div.elevator li');//楼层直达div
	var floor=$('.elevator');//楼层直达div
	fl=$('.floor_1').offset().top-200;//网页中第一楼的滚动条高度
	f2=$('.floor_2').offset().top-200;
	f3=$('.floor_3').offset().top-200;
	f4=$('.floor_4').offset().top-200;
	f5=$('.floor_5').offset().top-200;
	if(sTop >= fl && sTop < fl+210){
		floor.fadeIn(500);//淡入效果
		liItem.eq(0).addClass('cur').siblings().removeClass('cur');//当前楼层加上样式cur,兄弟楼层去掉样式cur
	}
	if(sTop < fl){
		floor.fadeOut(500);//淡出效果
	}
	if(sTop >= f2){
		liItem.eq(1).addClass('cur').siblings().removeClass('cur');
	}
	if(sTop >= f3){
		liItem.eq(2).addClass('cur').siblings().removeClass('cur');
	}
	if(sTop >= f4){
		liItem.eq(3).addClass('cur').siblings().removeClass('cur');
	}
	if(sTop >= f5){
		liItem.eq(4).addClass('cur').siblings().removeClass('cur');
	}
	
}

我的微信号