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

最新推荐文章于 2024-04-14 20:34:11 发布

xianhenyuan

最新推荐文章于 2024-04-14 20:34:11 发布

阅读量6.5k

点赞数 5

分类专栏： HTML 文章标签： html css吸顶效果

本文链接：https://blog.csdn.net/xianhenyuan/article/details/103436510

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

一：使用jquery实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>html实现吸顶效果的几种方式</title>
</head>
<!--页面样式  start -->
<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>
<!--页面样式  end -->

<!--吸顶效果样式 start-->
<style>
	.fix{
		position:fixed;
		left:0;
		top:0;
		width:100%;
	}

	.nav2{
		margin-top: 60px;
	}
</style>
<!--吸顶效果样式 end-->

<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 吸顶部分的高度。
在这里插入图片描述

三、内容部分 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;
	}

在这里插入图片描述

xianhenyuan

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
html实现吸顶效果的几种方式

页面下拉之前是这样的：想实现滑动滚动条往下的时候，导航保持在顶部的效果有几种方式实现？一：使用jquery实现<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>html实现吸顶效果的几种方式</title></head>&lt...
复制链接

扫一扫