网页固定侧栏的做法

最新推荐文章于 2022-07-17 17:44:44 发布

业余草

最新推荐文章于 2022-07-17 17:44:44 发布

阅读量4.8k

点赞数 2

分类专栏： html5 文章标签：固定导航 fixed position 侧栏固定 html5

本文链接：https://blog.csdn.net/xmtblog/article/details/46817099

版权

html5 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

固定侧边的做法有很多种，今天为大家介绍一种非常简单的做法。整个html文档只有23行代码就搞定了。

网上也有很多做法，但是都太过复杂，一大堆代码。而且有的很采用一些jquery的一些插件。

侧栏的做法和顶部、页脚都大致雷同。掌握其中的一种，其他的都很容易实现。常见的例子有：新浪微博的菜单栏，新浪体育的右侧二维码扫描等功能都是这样的实现。

这种固定特定部位，而不随滚动条滚动的做法，见下面代码：

<!DOCTYPE html>
<html>
	<head>
		<title>测试</title>
		<style>
			#left{
				position:fixed;
				top:100px;
				right:0px;
			}
			.content{
				height:1700px;
				border:1px solid red;
			}
		</style>
	</head><!-- 欢迎大家关注我的博客！如有疑问,请加QQ群：454796847共同学习！ -->
	<body>
		<div id="left">
			<img src="1.png"/>
		</div>
		<div class="content"></div>
	</body>
</html>

运行效果如下：