HTML页面滚动时获取离页面顶部的距离2种实现方法
window.onscroll = function() {
console.info(window.scrollY);
}
</script>
注册onscroll事件,在控制台(按F12)打印当前页面距离页面顶部的距离(单位:像素px)
方法二:jQuery
$(window).scroll(function() {
console.info($(window).scrollTop());
});
});
调用window对象的scroll方法注册滚动事件,调用window对象的scrollTop方法,意义同scrollY属性。
HTML页面滚动时获取离页面顶部的距离2种实现方法的更多相关文章
- JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)
先看效果: 阅读前提:充分理解div的三种定位方式:浮动,相对定位,绝对定位 方法一(顶部) 原理:直接使用css 进行控制:缺点:不兼容ie6-: 实现:positi ...
- jquery页面滚动,菜单固定到顶部
// 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- Javascript实现页面滚动时导航智能定位
遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
- ios真机使用fixed定位页面滚动时fixed定位的元素也会跟着滚动
到了ios真机APP中,页面向下滚动,fixed的元素也跟着滚,虽然最后它还是到了它该在的地方,但是它跟着滚动也很影响页面的流畅性和交互性好伐.
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
随机推荐
- spring boot(九):Spring Boot中Redis的使用
Redis实战代码 1.引入 spring-boot-starter-redis <dependency> <groupId>org.springframework.boot& ...
- [PageNofM]一直显示数字+0
解决办法: Options->ReportOptions->DoublePass勾选即可
- C# 简单的反射机制实例
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- [C++]指针和指向数组的指针[一维数组与指针]
1.一维数组与指针 形如:int型 数组 a[10] 1)&a[0] 地址常量;地址类型:int *型 ; 存储数组a的首地址 ...
- luogu P2515 [HAOI2010]软件安装
传送门 看到唯一的依赖关系,容易想到树型dp,即\(f_{i,j}\)表示选点\(i\)及子树内连通的点,代价为\(j\)的最大价值,然后就是选课那道题 但是要注意 1.题目中的依赖关系不一定是树,可 ...
- 离线安装IDEA插件
1.idea插件官网http://plugins.jetbrains.com/idea 搜索并下载对应的插件的zip包 2.打开软件进行离线安装 IDEA-->Setting-->Plug ...
- joomla安装
最开始我以为是我电脑反映慢.傻傻的等了很久.因为我在sae上面初始化成功了.只是差两张表而已.等了很久很久.也试了好几次.反正就是卡在创建数据表那里.突然我想到在sae初始化数据库的时候有两种模式In ...
- mysql一次查询,返回多个统计结果
1.sum(if) select sum(if(status=1,1,0)) as s1_count,sum(if(status=2,1,0)) as s2_countfrom order; 2.co ...
- VMware12虚拟机中Ubuntu16.04安装CPU版本Caffe
首先,可以自行下载VMware12进行安装,基本上都是直接点击‘下一步’直到安装完成,这里重点讲一下Ubuntu16及Caffe的安装步骤 第一步: 下载Ubuntu16.04版本的文件,这里给出链接 ...
- Windows和Mac上NodeJS和Express的安装
一.安装NodeJS,官网上下载,https://nodejs.org/en/ 直接下一步安装就行了. 打开命令行工具,输入 node -v 则会出现node的版本,则成功了. 下面我们介绍如何安装e ...