电商楼层跳转效果

最新推荐文章于 2022-11-25 17:42:14 发布

小晓白的博客

最新推荐文章于 2022-11-25 17:42:14 发布

阅读量1.4k

点赞数

分类专栏： JQuery JavaScript 文章标签： js 前端

本文链接：https://blog.csdn.net/wbbott/article/details/69225932

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

JQuery

13 篇文章 0 订阅

订阅专栏

电商楼层动态跳转效果

具体代码如下





   
   
电商首页楼层左侧边栏效果
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="floor.js"></script>
 type="text/css" rel="stylesheet" href="floor.css">



	
   
   
    	
    
    
     
     头部
    
    
        
    
    
     
     11111
    
    
        
    
    
     
     22222
    
    
        
    
    
     
     33333
    
    
        
    
    
     
     44444
    
    
        
    
    
     
     55555
    
    
        
    
    
     
     66666
    
    
        
    
    
     
     77777
    
    
        
    
    
     
     88888
    
    
        
    
    
     
     底部
    
    
    
   
   
    
   
   
    	
    
    1
2
3
4
5
6
7
8
    
   
   


// JavaScript Document

$(window).scroll(function(){
	var winscroll = $(window).scrollTop();
	var divtop = $(".floor").offset() == null ? 0 : $(".floor").offset().top;
	//左侧边栏显示/隐藏
	if (winscroll > divtop) {
		$(".side-nav").show();
	} else {
		$(".side-nav").hide();
	}
		
	var limax = 0;
	$(".floor").each(function (index, element) {
		//console.log($(".floor:eq(" + index + ")").offset().top);
		if (winscroll > $(".floor:eq(" + index + ")").offset().top - 200) {
			limax += 1;
		}
	});
	var amin = limax - 1;
	//console.log(amin);
	$(".side-nav ul li").removeClass("active");
	$(".side-nav ul li:eq(" + amin + ")").addClass("active");
		
});


$(document).ready(function() {
    $(".side-nav ul li a").click(function(event){
		event.preventDefault();	//取消a标签的默认动作
		console.log($(this).attr("data-target"));
		var atop = $("#" + $(this).attr("data-target") + "").offset() == null ? 0 : $("#" + $(this).attr("data-target") + "").offset().top; 
		$('body,html').animate({scrollTop: atop - 40}, 200);
	});
});
@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;}
a{ text-decoration:none;}
.box{width:1200px;margin:0 auto;}
.box header{height:200px; line-height:200px; text-align:center; font-size:24px; border:1px solid #ccc; margin-bottom:20px; border-top:none;}
.box .floor{height:600px; line-height:600px; text-align:center; font-size:100px;border:1px solid #ccc; margin-bottom:20px;}
.box footer{height:200px; line-height:200px; text-align:center; font-size:24px; border:1px solid #ccc; border-bottom:none;}

.side-nav{ position:fixed;top:50%; left:50%; margin-left:-670px; margin-top:-120px; display:none; height:auto;}
.side-nav ul{ list-style:none;}
.side-nav ul li{ width:50px; height:30px; line-height:30px; background-color:#000; text-align:center;}
.side-nav ul li a{ color:#fff;}
.side-nav ul li:hover{ background-color:#fff;}
.side-nav ul li:hover a{ color:#000;}
.side-nav ul li.active{ background-color:#fff;}
.side-nav ul li.active a{ color:#000;}