关于页面向下滚动到元素位置，元素停靠顶部不动，当页面向上滚动到元素位置时，元素回到原来位置的效果。

#麻辣小龙虾#

已于 2023-04-18 10:15:12 修改

阅读量3.2k

点赞数

分类专栏： web前端 javascript 文章标签： javascript

于 2017-04-05 10:34:50 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/69227600

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

javascript

90 篇文章 1 订阅

订阅专栏

关于页面向下滚动到元素位置，元素停靠顶部不动，当页面向上滚动到元素位置时，元素回到原来位置的效果，思路很简单，就是监听window滚动，获取元素到页面顶部位置，如果页面滚动距离大于元素到顶部距离，那么添加position:fixed;left:0;样式，小于则移出样式效果。
这里写图片描述

<html>
	<head>
		<meta charset="utf-8">
		<title>demo</title>
		<style type="text/css">
            *{ padding:0px; margin:0px;list-style:none;}
			.box{width:300px;height:300px;background:red;margin:600px 200px;}
            body{height:9999px;}
			.fixed{position:fixed;top:0;margin-top:0;}
        </style>
	</head>
	
	<body>
		<div class="box">
            fix的box模型
		</div>
	</body>
	
	<script type="text/javascript" src="Util/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		
			var box = $(".box");
			var boxTop = box.offset().top;	//元素到页面顶部的距离
			
			$(document).scroll(function(){
			
				var winScrollTop = $(window).scrollTop();	//获取窗口滚动的距离
				console.log(winScrollTop);
				if(winScrollTop > boxTop){
					box.addClass("fixed");
				}else{
					box.removeClass("fixed");
				}
				
			});
		});
	
	</script>
</html>

#麻辣小龙虾#

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
关于页面向下滚动到元素位置，元素停靠顶部不动，当页面向上滚动到元素位置时，元素回到原来位置的效果。

关于页面向下滚动到元素位置，元素停靠顶部不动，当页面向上滚动到元素位置时，元素回到原来位置的效果，思路很简单，就是监听window滚动，获取元素到页面顶部位置，如果页面滚动距离大于元素到顶部距离，那么添加position:fixed;left:0;样式，小于则移出样式效果。
复制链接

扫一扫