zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    声明式编程和命令式编程的比较
    函数式编程
    读《暗时间》
    动态语言和静态语言的比较
    2013第二次实训
    for惠普2013实习生
    bat的大数据
    android stduio优化
    当move手势太快,降低频率
    ANR没root的时候处理*(转)
  • 原文地址:https://www.cnblogs.com/lml-lml/p/10143969.html
Copyright © 2011-2022 走看看