注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码

充值

jQuery商城常用楼层定位菜单代码

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2022-06-04
jQuery商城常用楼层定位菜单代码
jQuery楼层定位菜单代码是一款商城常用的点击侧边楼层或者鼠标滚轮滚动都能精确定位到页面对应的楼层位置的折叠式楼层菜单网页特效。


js代码

<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$("li:odd").hide();//li的第偶数个隐藏
	$("#slider ul li.active").next().show();//激活的li下面那条线显示

	$(window).scroll(function(){
		var winHeight = $(window).height();//浏览器可视窗口的高度
		var scrollHeight = $(window).scrollTop();//鼠标滚动的距离
		// if($("#header").height()){   //判断侧边栏什么时候显示
			$("#content .section").each(function(){
				if(winHeight+scrollHeight-$(this).offset().top>winHeight/2){
					$("#slider ul li").removeClass("active").prev(".line").hide();
					$("#slider ul li").eq($(this).index()).addClass("active").next(".line").show();
				}	
			})
		// }
	})
	$("#slider ul li").click(function(){
		
		var current = $("#content .div").eq($(this).index()).offset().top;
		$("html,body").animate({
			"scrollTop":current
		},500);
		$(this).addClass("active").siblings().removeClass("active").siblings(".line").hide();
		$(this).eq($(this).index()).addClass("active").next(".line").show();
	})
})
</script>