• 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>
    
  • 相关阅读:
    算法
    爬虫--scrapy框架
    Flask--SQLAlchemy
    Flask--WTForms
    Django--model操作
    Odoo10 自定义模块创建
    odoo10 工作流、安全机制、向导
    odoo10 高级视图
    odoo10 onchange、唯一性约束
    Odoo10 模型(结构化的应用数据)、视图(用户界面设计)
  • 原文地址:https://www.cnblogs.com/lml-lml/p/10143969.html
Copyright © 2020-2023  润新知