jquery+css实现滚动固定侧边栏

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

凌晨两点奔跑的绵羊

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

阅读量2.9k

点赞数 1

分类专栏： jquery web前端

本文链接：https://blog.csdn.net/ksyjy/article/details/78323999

版权

这篇博客展示了如何使用jQuery和CSS实现当页面滚动时，侧边栏保持固定在屏幕底部的效果。通过获取侧边栏的高度，并监听窗口滚动事件，动态调整侧边栏的定位方式，实现了在内容超过窗口高度时侧边栏变为固定位置，确保始终可见。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			font-size:80px;
			margin:0;
			padding:0;
		}
		.fl{
			float:left;
			width: 70%;
			height: 2210px;
			background: pink;
		}
		.fr{
			float:right;
			width: 29%;
			height: 1000px;
			background: cyan;
		}
	</style>
</head>
<body>
	<div class="fl">左边
		<div style="color:red">1</div>
		<div style="color:orange">2</div>
		<div style="color:red">3</div>
		<div style="color:orange">4</div>
		<div style="color:red">5</div>
		<div style="color:blue">6</div>
		<div style="color:orange">7</div>
		<div style="color:red">8</div>
		<div style="color:oran