• js悬浮吸顶


    <head>
    	<meta charset="UTF-8">
    	<title>吸顶和锚点链接</title>
    </head>
    <style>
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	
    	.perent {
    		background: #ccc;
    		 100%;
    	}
    	
    	p {
    		text-align: center;
    	}
    	
    	.header {
    		 1200px;
    		margin: 0 auto;
    		height: 60px;
    		background: greenyellow;
    	}
    	
    	.fixed {
    		position: fixed;
    		top: 0;
    		left: 0;
    		 100%;
    		height: 60px;
    		margin: 0 auto;
    		text-align: center;
    		z-index: 10;
    		background: #fff;
    		box-shadow: 2px 0px 20px rgba(0, 0, 0, 0.3);
    	}
    	
    	.tab {
    		margin: 20px auto;
    		height: 60px;
    		overflow: hidden;
    	}
    	
    	.tab li {
    		 33%;
    		float: left;
    		border: 1px solid #007AFF;
    		text-align: center;
    		padding: 10px 0;
    		border-radius: 10px;
    		cursor: pointer;
    	}
    	.child{
    		 600px;
    		height: 100px;
    		background: palegoldenrod;
    		margin: 200px auto;
    		border-radius: 10px;
    	}
    </style>
    
    <body>
    	<div class="perent">
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<p>测试数据测试数据</p>
    		<div class="header">哈哈哈哈,猜我是谁啊</div>
    
    		<ul class="tab" id="tab">
    			<li class="item">11111</li>
    			<li class="item">22222</li>
    			<li class="item">33333</li>
    		</ul>
    		
    		<div class="child">1111111111111</div>
    		<div class="child">2222222222222</div>
    		<div class="child">3333333333333</div>
    	</div>
    </body>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js">
    </script>
    <script>
    	window.addEventListener("scroll", this.handleScroll);
    
    	function handleScroll() {
    		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    		var tabOffsettop=document.getElementById('tab').offsetTop
    		if(scrollTop >= 278) {
    			$('.header').addClass("fixed")
    			$('.tab').addClass("fixed")
    		} else {
    			$('.header').removeClass("fixed")
    			$('.tab').removeClass("fixed")
    		}
    	}
    </script>
    
  • 相关阅读:
    转载:C#中的属性、和字段的区别
    在idea中创建一个maven web工程及解决工程创建过慢问题
    注解&动态代理
    Listener&Filter
    Ajax&jQuery
    JSP&EL&JSTL
    Cookie&Session
    HttpServletRequest&HttpServletResponse
    Http协议&Servlet
    XML
  • 原文地址:https://www.cnblogs.com/lml-lml/p/10143969.html
Copyright © 2020-2023  润新知