html实现吸顶效果的几种方式

谁践踏了优雅 2023-06-20 03:59 15阅读 0赞

页面下拉之前是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu_size_16_color_FFFFFF_t_70]想实现滑动滚动条往下的时候，导航保持在顶部的效果有几种方式实现？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu_size_16_color_FFFFFF_t_70 1]

# 一：使用jquery实现 #

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>html实现吸顶效果的几种方式</title>
    </head>
    
    <style>
    	*{
    		margin: 0;
    		padding: 0;
    		list-style: none;
    		text-decoration: none;
    	}
    	body{
    		background: #f3f0eb;
    	}
    	.header_warp{
    		width: 100%;
    		min-width: 1180px;
    		/*position: fixed;
            top: 0px;
            z-index: 9999;*/
    
    
    	}
    	.header_frist{
    		width: 100%;
    		min-width: 1180px;
    		background:#2b2b2d;
    		/*background: orange;*/
    	}
    	.header_first_content{
    		width: 1180px;
    		height: 70px;
    		/*	background: yellow;*/
    		margin: 0 auto;
    	}
    	.header_search{
    		width: 285px;
    		height: 40px;
    		padding: 15px 0;
    		/*background:green;*/
    		margin: 0 auto;
    
    	}
    	.header_search_warp{
    		width: 285px;
    		border-radius: 20px;
    		background:white;
    		height: 40px;
    
    		/*padding-top:5px;
            text-align: center;*/
    	}
    	.serch_text{
    		width: 195px;
    		height: 20px;
    		border: 0;
    		padding: 10px;
    		margin-left:20px ;
    		box-sizing:content-box;
    		float: left;
    
    	}
    	.serch_sum{
    		height: 40px;
    		width: 50px;
    
    		border-radius:0 20px 20px 0 ;
    		border: 0;
    		/*	margin-left: 5px;*/
    		background: url(../img/min.png)no-repeat -190px -64px;
    		background-color: orange;
    	}
    	.header_sendm{
    		width:100% ;
    		min-width: 1180px;
    		height: 60px;
    		background:white;
    
    	}
    	.header_lists{
    		width: 1180px;
    		height: 60px;
    		/*	background: darkgoldenrod;*/
    		margin: 0 auto;
    		/*	border: 3px solid green;*/
    	}
    	.header_sendm .header_lists li{
    		float: left;
    		margin: 15px;
    		font: 18px/30px;
    		/*text-align: center;*/
    	}
    	.header_sendm .header_lists li a{
    		color: black;
    
    
    	}
    	.header_sendm .header_lists li a:hover{
    		color: red;
    	}
    	.clear-fix::after{
    		content: "";
    		width: 0;
    		height: 0;
    	}
    </style>
    
    
    
    <style>
    	.fix{
    		position:fixed;
    		left:0;
    		top:0;
    		width:100%;
    	}
    
    	.nav2{
    		margin-top: 60px;
    	}
    </style>
    
    
    <body>
    <header class="header_warp">
    
    	<div class="header_frist">
    		<div class="header_first_content">
    			<div class="header_search">
    				<form action="">
    					<div class="header_search_warp">
    						<input type="text" name="" id="" value="" class="serch_text"/>
    						<input type="submit" name="" id="" value="" class="serch_sum"/>
    					</div>
    				</form>
    			</div>
    		</div>
    	</div>
    
    	<nav class="header_sendm" id="nav">
    		<ul class="header_lists clear-fix">
    			<li><a href="#">首页</a></li>
    			<li><a href="#">游戏中心</a></li>
    			<li><a href="#">游戏礼包</a></li>
    			<li><a href="#">游戏开测</a></li>
    			<li><a href="#">坛友新闻</a></li>
    			<li><a href="#">手游排行</a></li>
    			<li><a href="#">游戏专区</a></li>
    			<li><a href="#">手游攻略</a></li>
    			<li><a href="#">坦克评测</a></li>
    			<li><a href="#">游戏视频</a></li>
    			<li><a href="#">游戏规划</a></li>
    		</ul>
    	</nav>
    </header>
    
    
    <div id="body" style="height: 1000px;">
    2<br>
    2<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1
    </div>
    
    
    
    </body>
    
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    	$(function(){
    		var navBar = $("#nav");
    		var navBar2 = $("#nav2");
    		var titleTop = navBar.offset().top;
    
    		$(window).scroll(function(){
    			var btop = $(window).scrollTop();
    			if (btop > titleTop) {
    				navBar.addClass('fix');
    				navBar2.addClass('nav2');
    			} else {
    				navBar.removeClass('fix');
    				navBar2.removeClass('nav2');
    			}
    		})
    	})
    </script>
    
    
    </html>

## 二、仅css，搜索框+导航fixed ##

.header_warp{
    		position:fixed;
    		left:0;
    		top:0;
    		width:100%;
    
    	}
    
    	#body{
    		margin-top: 130px;
    	}

这个不好的一点是 搜索框 也会固定在顶部，并且需要注意的是内容区域要添加个 margin-top 吸顶部分的高度。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu_size_16_color_FFFFFF_t_70 2]

## 三、内容部分 absolute，导航 fixed ##

可以看到header样式中有个 z-index=1 ，是因为如果不加高导航的层级，在内容部分下滑展示的时候会在导航上面划过。

header{
    		position:fixed;
    		left:0;
    		top:0;
    		width:100%;
    		z-index: 1;
    	}
    
    	#body{
    		position: absolute;
    		left:0;
    		width:100%;
    		top: 130px;
    	}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191207160316324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191207160508790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191207161736114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191207162340695.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW5oZW55dWFu,size_16,color_FFFFFF,t_70