楼层滚动(JQ)

ゝ一纸荒年。 2022-06-03 02:14 142阅读 0赞

html:

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="css/base.css">
    	<style>
    		#header,#f1,#f2,#f3{
    			width: 80%;
    			height: 500px;
    			background: yellow;
    			margin-left: 10%;
    			margin-top: 50px;
    		}
    		#f1{
    			background: green;
    		}
    		#f2{
    			background: red;
    		}
    		#f3{
    			background: blue;
    		}
    		#lift{
    			position: fixed;
    			top: 280px;
    			display: none;
    		}
    		.lift_btn{
    			display: inline-block;
    			width: 50px;
    			height: 50px;
    			border: 1px solid #000;
    		}
    		.hover{
    			background: red;
    		}
    	</style>
    </head>
    <body>
    	<div id="header"></div>
    	<div class="floor" id="f1">
    		<p>第一层</p>
    	</div>
    	<div class="floor" id="f2">
    		<p>第二层</p>
    	</div>
    	<div class="floor" id="f3">
    		<p>第三层</p>
    	</div>
    	<div id="lift">
    		<ul>
    			<li class="lift_item">
    				<a href="javascript:;" class="lift_btn">
    					<span>1</span>
    				</a>
    			</li>
    			<li class="lift_item">
    				<a href="javascript:;" class="lift_btn">
    					<span>2</span>
    				</a>
    			</li>
    			<li class="lift_item">
    				<a href="javascript:;" class="lift_btn">
    					<span>3</span>
    				</a>
    			</li>
    		</ul>
    	</div>
    
    	<script src="js/jquery.min.js"></script>
    	<script src="js/floor.js"></script>
    </body>
    </html>

js:

(()=>{
    	var $lift=$("#lift");
    	$(window).scroll(()=>{
    		var scrollTop=$('html,body').scrollTop();
    		var $f1=$("#f1");
    		var offsetTop=$f1.offset().top;
    		if(offsetTop<scrollTop+innerHeight/2)
    			$lift.fadeIn(500);
    		else
    			$lift.fadeOut(500);
    		var $floors=$(".floor");
    		$floors.each((i,elem)=>{
    			var $f=$(elem);
    			if($f.offset().top<scrollTop+innerHeight/2)
    				$lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover");
    		});
    	});
    
    	$lift.children("ul").on("click","li",function(){
    		var $li=$(this);
    		var i=$li.index();
    		var $fi=$(".floor:eq("+i+")");
    		var offsetTop=$fi.offset().top;
    		$("html").animate({
    			scrollTop:offsetTop-60
    		},500)
    	})
    })();