Jquery-左侧内容滚动，右侧固定区块_jquery 头部和右边固定左边滚动-CSDN博客

本文链接：https://blog.csdn.net/weixin_45770477/article/details/108164733

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
	<title>左侧内容出现滚动条时，右侧固定区块</title>
	<link type="text/css" href="css/jq22.css" rel="stylesheet" />
	<script src="http://www.jq22.com/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/js.js"></script>
</head>

<body>
	<div class="box">
		<!--代码开始-->
		<div class="main">
			向下滚动查看效果
		</div>
		<div class="sub">
			<div class="sub01"></div>
			<div class="sub01"></div>
			<div class="fixed">我是固定的哟</div>
		</div>
		<!--代码结束-->
	</div>
</body>

</html>

JS代码

$(document).ready(function (e) {
	t = $('.fixed').offset().top;
	mh = $('.main').height();
	fh = $('.fixed').height();
	$(window).scroll(function (e) {
		s = $(document).scrollTop();
		if (s > t - 10) {
			$('.fixed').css('position', 'fixed');
			if (s + fh > mh) {
				$('.fixed').css('top', mh - s - fh + 'px');
			}
		} else {
			$('.fixed').css('position', '');
		}
	})
});

CSS代码

* {
    padding: 0px;
    margin: 0px;
}

.box {
    width: 1000px;
    background: #ccc;
    margin: 0 auto;
    overflow: hidden;
}

.main {
    width: 770px;
    height: 2000px;
    background-color: #EBEBEB;
    float: left;
    text-align: center;
    line-height: 500px;
}

.sub {
    width: 220px;
    background: #FC6;
    float: right;
}

.sub01 {
    width: 220px;
    height: 100px;
    background: #0CC;
    margin-bottom: 10px;
}

.fixed {
    width: 220px;
    height: 300px;
    background: #F66;
    font: normal 13px/30px \5FAE\8F6F\96C5\9ED1;
    text-align: center;
    top: 10px;
}