JavaScript实现页面到滚动到指定位置执行某些操作
来源:互联网 发布:three.js dae 顶点数 编辑:程序博客网 时间:2024/06/03 17:50
使用JavaScript实现页面滑动到指定位置加载动画。
若页面滚动到class名为group-pic的元素的位置时开始加载
$(document).ready(function(){ var a,b,c; a = $(window).height(); //浏览器窗口高度 var group = $(".group-pic"); $(window).scroll(function(){ b = $(this).scrollTop(); //页面滚动的高度 c = group.offset().top; //元素距离文档(document)顶部的高度 if(a+b>c){ ... }else{ ... } });});原理:
1.获取浏览器窗口的高度;
2.获取页面滚动的高度;
3.获取页面距离文档(document)顶部的高度
offset().top具体指的是距哪里的高度呢?
一些获宽高度的属性:
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
1.offsetTop : 当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
2.offsetLeft : 当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
3.offsetWidth : 当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值
- JavaScript实现页面到滚动到指定位置执行某些操作
- JavaScript实现页面到滚动到指定位置执行某些操作
- JavaScript 滚动页面到指定元素位置
- JavaScript 滚动页面到指定元素位置
- 页面滚动到指定位置
- Javascript自动将页面滚动到指定位置
- ScrollTo:实现平滑滚动到页面指定位置
- ScrollTo:实现平滑滚动到页面指定位置
- js 滚动/跳转页面到指定位置
- 页面自动滚动到指定位置
- jQuery滚动到页面指定位置
- 页面滚动到指定的位置
- jQuery滚动到页面指定位置
- ScrollTo:平滑滚动到页面指定位置
- jquery操作滚动条滚动到指定位置
- jquery操作滚动条滚动到指定位置
- jquery操作滚动条滚动到指定位置
- jquery操作滚动条滚动到指定位置
- 远程链接Linux服务器
- Seven-Segment Display
- unity开发 --------- NGUI(Localization、UILocalize)
- github 本地上传
- ANR异常
- JavaScript实现页面到滚动到指定位置执行某些操作
- 接口测试之Postman简介
- 关于烂代码的那些事(上)
- msys2 安装笔记
- thinkphp 中GROUP BY功能
- Mybatis源码解析-MapperRegistry注册mapper接口
- TI—CC3200【5】关于TLV320AIC3254的hp和lo输出“沙沙”声的问题
- C# 获取汉语拼音全码及简码
- 数据库导入excel数据