使用JQ完成div滑动到一个位置开始固定

最新推荐文章于 2024-09-02 13:54:18 发布

小道仙97

最新推荐文章于 2024-09-02 13:54:18 发布

阅读量2.6k

点赞数 2

分类专栏： # JQuery 文章标签： div滑动 DIV固定 pasition div滑动到固定

本文链接：https://blog.csdn.net/Tomwildboar/article/details/79828739

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这几天做一个页面，用到div滑动到一定的位置然后固定，查找了好久的资料才解决，这里做一个总结。

下面我会贴出代码，代码中会详细解释，如果有不懂的可以给我留言。

注：

1、单纯的copy一下代码是看不到运行的效果的，需要在第一个div和最后一个div里面添加足够多的内容，直到页面可以出现滚动效果才可以。

2、代码唯一要改的地方就是JQ核心文件和添加足够的div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--引入JQuery核心js文件-->
	<script type="text/javascript" src="js/jquery_js/jquery-1.11.3.min.js" ></script>
	<style>
		/*这个css样式就是固定div的*/
		.sfixed{
			position:fixed;
			top: 1000px;
			left: 0px;
			z-index: 10;
		}
		.scroll{
			margin-left: 200px;
			border: 1px red solid;
			width: 20%;
			height: 10px;
		}
	</style>
	<script>
		$(function(){
//			函数offset()的作用是返回调用者当前的位置
//			获取你所要开始固定的位置
			var top1 = $(".scroll").offset().top;
			$(window).scroll(function(){
//				动态获取当前页面的位置
				var win_top = $(this).scrollTop();
//				动态获取需要固定的div的位置
				var top = $(".scroll").offset().top;
//				把当前页面位置和要固定div的位置想对比
//				如果页面位置大于等于需要固定的div位置说明此时需要固定了，
//                              只需要给它添加一个css样式即可
				if(win_top >= top){
					$(".scroll").addClass("sfixed");
				}
				//把当前页面位置和要固定div的位置想对比
//				如果页面位置小于需要固定的div位置说明此时不需要固定，
//                              只需要给它移除之前添加的css样式即可
				if(win_top < top1){
					$(".scroll").removeClass("sfixed");
				}	
			});
		});
	</script>
	<body>
		<div class="top">
			<div>
				内容1
			</div>
		</div>
		<div class="scroll">
			<!--这是需要固定的部分-->			
		</div>
		<div class="bottom">
			<div>
				内容1
			</div>
		</div>
	</body>
</html>