scroll和offset案例

最新推荐文章于 2023-03-08 16:43:02 发布
最新推荐文章于 2023-03-08 16:43:02 发布
阅读量204 收藏
点赞数
分类专栏： ＪａｖａＳｃｒｉｐｔ
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/103914799
版权

1.固定导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
		    img{
				vertical-align: top;
			}
			.main{
				margin: 0 auto;
				width: 1000px;
				margin-top: 5px;
			}
			.fixed{
				position: fixed;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<img src="images/top.png" alt=""/>
		</div>
		<div class="nav">
			<img src="images/nav.png" />
		</div>
		<div class="main">
			<img src="images/main.png" />
		</div>
		<script>
			window.onload=function(){
				var top=document.getElementsByClassName("top")[0];
				var height = top.offsetHeight;
				var nav=document.getElementsByClassName("nav")[0];
				var main=document.getElementsByClassName("main")[0];
				window.onscroll=function(){
					if(scroll().top>height){
						nav.className="fixed";
						main.style.paddingTop=nav.offsetHeight+"px";
					}else{
						nav.className="";
						main.style.paddingTop=0;
					}
				}
			}
			
			function scroll(){
				if(window.pageYOffset!==undefined){
					var json={
						"top":window.pageYOffset,
						"left":window.pageXOffset
					}
					return json;
				}else if(document.compatMode=="CSS1Compat"){
					var json={
						"top":document.documentElement.scrollTop,
						"left":window.documentElement.scrollLeft
					}
					return json;
				}else{
					var json={
						"top":document.body.scrollTop,
						"left":window.body.scrollLeft
					}
					return json;
				}
			}
		</script>
	</body>
</html>

2.两侧跟随广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.img1{
				position: absolute;
				top: 80px;
				left: 10px;
			}
			.img2{
				position: absolute;
				top: 80px;
				right: 10px;
			}
			div{
				height: 2000px;
			}
		</style>
	</head>
	<body>
		<img class="img1" src="images/aside.jpg" />
		<img class="img2" src="images/aside.jpg" />
		<div>
			
		</div>
		<script>
			var imgArr=document.getElementsByTagName("img");
			window.onscroll=function(){
				var val=scroll().top;
				animate(imgArr[0],val+80);
				animate(imgArr[1],val+80);
			}
			
			//缓动动画封装
			function animate(ele,target){
				clearInterval(ele.timer);
				ele.timer=setInterval(function(){
					var step=(target-ele.offsetTop)/10;
					step=step>0?Math.ceil(step):Math.floor(step);
					ele.style.top=ele.offsetTop+step+"px";
					if(Math.abs(target-ele.offsetTop)<=Math.abs(step)){
						ele.style.top=target+"px";
						clearInterval(ele.timer);
					}
				},30)
			}
			
			//封装scrollTop
			function scroll() {  // 开始封装自己的scrollTop
			    if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
			        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
			        return {
			            left: window.pageXOffset,
			            top: window.pageYOffset
			        }
			    }
			    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
			        return {
			            left: document.documentElement.scrollLeft,
			            top: document.documentElement.scrollTop
			        }
			    }
			    return {   // 未声明 DTD
			        left: document.body.scrollLeft,
			        top: document.body.scrollTop
			    }
			}
		</script>
	</body>
</html>

3.返回头部小箭头
被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。 技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				position: fixed;
				bottom: 100px;
				right: 50px;
				cursor: pointer;
				display: none;
			}
			div{
				height: 2000px;
			}
		</style>
	</head>
	<body>
		<img src="images/Top.jpg" />
		<div></div>
		<script>
			window.onload=function(){
				var img=document.getElementsByTagName("img")[0];
				window.onscroll=function(){
					if(scroll().top>200){
						img.style.display="block";
					}else{
						img.style.display="none";
					}
					leader=scroll().top;
				}
				
				var timer=null;
				var target=0;
				var leader=0;
				img.onclick=function(){
					//window.scrollTo(0,0);
					clearInterval(timer);
					timer=setInterval(function(){
						var step=(target-leader)/10;
						step>0?Math.ceil(step):Math.floor(step);
						leader=leader+step;
						window.scrollTo(0,leader);
						if(leader==0){
							clearInterval(timer);
						}
					},20)
				}
			}
		
			
			function scroll() {  // 开始封装自己的scrollTop
			    if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
			        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
			        return {
			            left: window.pageXOffset,
			            top: window.pageYOffset
			        }
			    }
			    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
			        return {
			            left: document.documentElement.scrollLeft,
			            top: document.documentElement.scrollTop
			        }
			    }
			    return {   // 未声明 DTD
			        left: document.body.scrollLeft,
			        top: document.body.scrollTop
			    }
			}
		</script>
	</body>
</html>

三个案例合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				width: 990px;
				margin: 0 auto;
			}
			*{
				padding: 0;
				margin: 0;
			}
			img{
				vertical-align: top;
			}
			.fixed{
				position: fixed;
				left: 0;
				top: 0;
			}
			.img1{
				position: absolute;
				top: 150px;
				left: 10px;
			}
			.img2{
				position: absolute;
				top: 150px;
				right: 10px;
			}
			.header{
				position: fixed;
				bottom: 50px;
				right: 50px;
				cursor: pointer;
				display: none;
			}
		</style>
	</head>
	<body>
		<img class="img1" src="images/aside.jpg" />
		<img class="img2" src="images/aside.jpg" />
		<img src="images/Top.jpg" class="header"/>
		<div class="top">
			<img src="images/top.png" />
		</div>
		<div class="nav"> 
			<img src="images/nav.png" />
		</div>
		<div class="main">
			<img src="images/main.png" />
		</div>
		
		<script>
			window.onload=function(){
				var top=document.getElementsByClassName("top")[0];
				var height=top.offsetHeight;
				var nav=document.getElementsByClassName("nav")[0];
				var main=document.getElementsByClassName("main")[0];
			
				var imgArr=document.getElementsByTagName("img");
				window.onscroll=function(){
					var val=scroll().top;
					animate(imgArr[0],val+150);
					animate(imgArr[1],val+150);
					if(val>height){
						imgArr[2].style.display="block";
						nav.className="fixed";
						main.style.paddingTop=nav.offsetHeight+"px";
					}else{
						imgArr[2].style.display="none";
						nav.className="";
						main.style.paddingTop=0;
					}
				}
				var timer=null;
				var target=0;
				var leader=scroll().top;
				imgArr[2].onclick=function(){
					clearInterval(timer);
					timer=setInterval(function(){
						var step=(target-leader)/10;
						step>0?Math.ceil(step):Math.floor(step);
						leader=leader+step;
						window.scrollTo(0,leader);
						if(leader==0){
							clearInterval(timer);
						}
					},20)
				}
			}
			
			
			
			//缓动动画封装
			function animate(ele,target){
				clearInterval(ele.timer);
				ele.timer=setInterval(function(){
					var step=(target-ele.offsetTop)/10;
					step=step>0?Math.ceil(step):Math.floor(step);
					ele.style.top=ele.offsetTop+step+"px";
					if(Math.abs(target-ele.offsetTop)<=Math.abs(step)){
						ele.style.top=target+"px";
						clearInterval(ele.timer);
					}
				},30)
			}
			//scroll封装
			function scroll(){
				if(window.pageYOffset!==undefined){
					var json={
						"top":window.pageYOffset,
						"left":window.pageXOffset
					}
					return json;
				}else if(document.compatMode=="CSS1Compat"){
					var json={
						"top":document.documentElement.scrollTop,
						"left":window.documentElement.scrollLeft
					}
					return json;
				}else{
					var json={
						"top":document.body.scrollTop,
						"left":window.body.scrollLeft
					}
					return json;
				}
			}
		</script>
	</body>
</html>
zuo_zuo_blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js学习-17（offset和scroll）
qq_42760119的博客
07-31 356
一、offset家族 三大家族：offset、scroll、client offset：偏移、补偿、位移 offset家族：是js中一套获取元素尺寸 的方法。 offset家族包括：offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent 1、offsetWidth和offsetHeight offsetwidth = content + padding + border offsetHeight = content + padding + bor
JavaScript中offset、client、scroll、属性及使用
wmeng13的博客
07-17 417
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{margin: 0px;padding:0px;} #box{w
js中offset,scroll和client系列
菜鸟要努力鸭的博客
01-16 185
* offset系列: * (父级元素margin+父级元素padding+父级元素border+自己的margin) * offsetLeft:元素距离左边边缘位置的值 * offsetTop:元素距离上面边缘位置的值 *//下面两个解决了通过elemen.style.width/height获取不到样式宽高的问题！！ * offsetWidth:获取元素的宽度(有边框) * of...
你真的懂offset与scroll吗？
weixin_30872789的博客
11-02 103
背景 身为一个前端工程师，每次在做关于滚动或者定位之类的交互时，或多或少都会用到offset、scroll之类的元素属性值来计算距离，但是每次都是现用现百度，从来没有真正系统地弄明白其中的原理及用法；在马上十一国庆假期以及项目压力较小的情况下，特作此篇总结以弥补相关知识的缺失 offset相关 以offset开头的属性有5个，分别是：offsetParent、offsetWi...
scroll、offset和client的区别
weixin_30437337的博客
04-22 122
整体布局： <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>比较</title> <style type="text/css"> *{ padding: 0; ...
【JavaScript源代码】Vue向下滚动加载更多数据scroll案例详解.docx
12-29
`vue-infinite-scroll` 会周期性检查 `busy` 和是否滚动到底部，只有两者条件都满足时，才会执行回调函数。 在实际应用中，`loadMore` 方法内的数据加载通常通过 AJAX 请求实现，而不是像示例中的 for 循环。因此，...
jquery经典案例
12-26
- **导航栏固定**：当页面滚动时，导航栏始终保持在顶部，通过`$(window).scroll()`监听滚动事件，`position()`和`offset()`获取元素位置，`addClass()`和`removeClass()`控制CSS类的切换。 - **图片懒加载**：...
jQuery学习笔记第二天的电梯导航案例代码
03-01
这个案例不仅展示了jQuery如何处理DOM操作和事件，还涉及到动画效果的创建，是学习jQuery基础知识的好例子。同时，这也是一种常见的前端交互设计，对提升网站的可用性和用户体验具有重要作用。在实际开发中，还可以...
基于jQuery实现的网站漂浮置顶和置底特效源码.zip
11-10
3. **计算元素位置**：在滚动事件触发时，获取元素相对于视口的位置，例如`var elementTop = $("#floatElement").offset().top`。 4. **设置样式**：当元素即将离开视口时，将其固定在顶部或底部。例如，如果元素将...
js中的scroll和offset 使用比较的实例与分析
10-26
介绍了js中的scroll和offset使用比较的实例与分析，有需要的朋友可以参考一下
JS中offset、client、scroll用法
weixin_42232876的博客
04-01 106
offset、client、scroll用法 offset 定位父级offsetParent 与当前元素最近的经过定位的父级元素 元素自身有fixed定位，offsetParent是null 元素自身无fixed定位，但有其他定位，offsetParent是body 元素自身无定位，父级元素存在定位，offsetParent是以最近的经过定位的父级元素 body元素的offsetParent是null 可以通过element.offsetParent查看元素的定位父级 offsetWidth和off
client..和offset..以及scroll..的区别
长河落日的博客
10-16 199
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0; padding: 0;
css：offset，scroll,client的用法
weixin_30945039的博客
02-09 179
1. offsetWidth：width + padding + border 　clientWidth：width + padding (不包含border) 　scrollWidth：大小是内容的大小 2. event.ClientX：鼠标相对于客户窗口的横坐标 　event.ClientY：鼠标相对于客户窗口的纵坐标 3.scrollTop: 被卷去的客户窗口的高 　scroll...
理解client、scroll和offset的差异
Ultranana的博客
03-19 696
client height&widthdocument.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 网页可见区域宽度 document.documentElement.clientHeight ==> 网页可见区域高度 do
原生JS中的scroll、offset、client总结
Lynn_ML的博客
01-05 286
一、offset系列 （1）offsetWidth=width+左右pandding+左右border（small：100+102+22=122，big：200+102+52=230） （2）offsetHeight=content+上下pandding+上下border（small：150+102+22=172，big：200+102+52=230） （3）offsetLeft(需参考其定位父元...
三大家族scroll、offset、client
梅花寺
03-08 673
三大家族区别offset家族 offsetHeight: 元素高，height+border+padding offsetWidth: 元素宽，width+border+padding offsetTop: 上边距离带有定位的父盒子的距离（重要） offsetLeft: 左边距离带有定位的父盒子的距离（重要） offsetParent: 最近的带有定位的父盒子。
offset、client、scroll三大系列
等归,的博客
11-28 202
offset、client、scroll三大系列
【UE·UI篇】ListView使用经验总结
水鸡的游戏开发学习笔记
05-07 3498
这篇文章用来记录我在使用ListView遇到的一些问题和经验。 关于ListView的基本使用前人总结过不少： List View中文介绍【博客园·一粒沙】 关于ListView的Entry和Item以及关键事件调用顺序【知乎·架狙只打脚】 关于ListView的滚动条（ScrollBar） ListView的滚动条丑不拉几的，所以经常会有以下需求： 如何关闭滚动条的显示？ 调用方法SetScrollBarVisibility。参数是ESlateVisiblity，设成Collapsed即可。 如何
offset client scroll
最新发布
03-16
offset client scroll是指客户端滚动的偏移量。在网页中，当用户滚动页面时，页面会发生滚动，此时可以通过JavaScript获取页面滚动的偏移量，即offset client scroll。这个偏移量可以用来实现一些特殊的效果，比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值