scroll和offset案例

最新推荐文章于 2022-11-28 21:43:11 发布
最新推荐文章于 2022-11-28 21:43:11 发布
阅读量201 收藏
点赞数
分类专栏： ＪａｖａＳｃｒｉｐｔ
版权声明：本文为博主原创文章，遵循 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
    评论
专栏目录
三大家族scroll、offset、client
梅花寺
03-08 668
三大家族区别offset家族 offsetHeight: 元素高，height+border+padding offsetWidth: 元素宽，width+border+padding offsetTop: 上边距离带有定位的父盒子的距离（重要） offsetLeft: 左边距离带有定位的父盒子的距离（重要） offsetParent: 最近的带有定位的父盒子。
js学习-17（offset和scroll）
qq_42760119的博客
07-31 355
一、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 scrollbar滚动条相关属性
lovewebeye的专栏
11-26 4613
window.innerHeight  表示浏览器可见或可用高度 window.pageXOffset 和 window.pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。 pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。 // 所有浏览器，除了 IE9 及更早版本 水平滚动: " + window.page...
offset、client、scroll三大系列
等归,的博客
11-28 199
offset、client、scroll三大系列
css：offset，scroll,client的用法
weixin_30945039的博客
02-09 177
1. offsetWidth：width + padding + border 　clientWidth：width + padding (不包含border) 　scrollWidth：大小是内容的大小 2. event.ClientX：鼠标相对于客户窗口的横坐标 　event.ClientY：鼠标相对于客户窗口的纵坐标 3.scrollTop: 被卷去的客户窗口的高 　scroll...
CSS Scrollbar (滚动条)
SeriousLose
05-12 8741
webkit内核浏览器（Chrome、Edge） 类名 作用 ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。 ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
【UE·UI篇】ListView使用经验总结
水鸡的游戏开发学习笔记
05-07 3350
这篇文章用来记录我在使用ListView遇到的一些问题和经验。 关于ListView的基本使用前人总结过不少： List View中文介绍【博客园·一粒沙】 关于ListView的Entry和Item以及关键事件调用顺序【知乎·架狙只打脚】 关于ListView的滚动条（ScrollBar） ListView的滚动条丑不拉几的，所以经常会有以下需求： 如何关闭滚动条的显示？ 调用方法SetScrollBarVisibility。参数是ESlateVisiblity，设成Collapsed即可。 如何
【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. **设置样式**：当元素即将离开视口时，将其固定在顶部或底部。例如，如果元素将...
tscroll让HTML元素产生动画的最流行动画库
08-10
在实际项目中，`t-scroll`可以广泛应用于各种场景，如产品展示、案例滚动、导航栏高亮等。结合CSS3的过渡和动画效果，可以创造出更丰富的视觉体验。 总结来说，`t-scroll`是一款强大的HTML元素动画库，它简化了动画...
js中的scroll和offset 使用比较的实例与分析
10-26
介绍了js中的scroll和offset使用比较的实例与分析，有需要的朋友可以参考一下
原生JS中的scroll、offset、client总结
Lynn_ML的博客
01-05 283
一、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实现元素居中
style201904的博客
05-22 792
元素居中 html <body style="height: 2000px;"> <button>显示</button> <div><button>X</button></div> css div{width: 200px;height: 200px;border: 2px solid red;...
css中offsetTop, offsetHeight,clientHeight,scrollTop,scrollHeight的区别
ChpeShy的博客
06-11 2776
一、前言 元素大小平时在开发中或多或少都有用到，时常在各种属性中犹豫不决，不知道该用哪个，现在来对偏移量(offsetTop)，客户区大小(clientTop)，滚动大小(scrollTop)和确定元素大小(getBoundingClientRect().top)做个总结。 二、分析 offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。这句话主要的点在于包含元素，包含元素的...
JavaScript中offset、client、scroll、属性及使用
wmeng13的博客
07-17 415
  &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
html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
热门推荐
u013795673的博客
08-10 3万+
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offs
Swing--JTextField(单行文本框组件)
LU_Leo的博客
03-20 702
JTextField JTextField类实现一个单行文本框，它允许用户输入单行的文本信息 JTextField构造方法 JTextField()：创建一个默认的文本框 JTextField(String Text)：创建一个指定初始化文本信息的文本框 JTextField(int columns)：创建一个指定列数的文本框 JTextField(String text,int colum...
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、付费专栏及课程。

余额充值