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- ...
随机推荐
- leetcode --binary tree
1. 求深度: recursive 遍历左右子树,递归跳出时每次加一. int maxDepth(node * root) { if(roor==NULL) return 0; int leftdep ...
- R 的农场 chebnear (二分答案+最近平面点对)
题面 \(solution:\) 这道题想到二分答案应该是不难的,因为题目是求平均工资的最小值,这个显然具备单调性: 我们设平均工资的最小值为ans,如果我们现在的平均工资x小于ans那么将x带入题目 ...
- Thymeleaf在IDEA中的使用
让html页面的thymeleaf 标签不显示刺眼的红色波浪线,解决方法如下 IDEA官方链接:https://www.jetbrains.com/help/idea/2017.1/thymeleaf ...
- input框的输入限制
1.输入数字 <input onKeyUp="value=value.replace(/[^\d|chun]/g,'')"> 2.只输入中文 <input typ ...
- Java编程:悲观锁、乐观锁的区别及使用场景
定义: 悲观锁(Pessimistic Lock): 每次获取数据的时候,都会担心数据被修改,所以每次获取数据的时候都会进行加锁,确保在自己使用的过程中数据不会被别人修改,使用完成后进行数据解锁.由于 ...
- Linux内核驱动--硬件访问I/O【原创】
寄存器与内存 寄存器与内存的区别在哪里呢? 寄存器和RAM的主要不同在于寄存器操作有副作用(side effect或边际效果): 读取某个地址时可能导致该地址内容发生变化,比如很多设备的中断状态寄存器 ...
- kafka系列一、kafka安装及部署、集群搭建
一.环境准备 操作系统:Cent OS 7 Kafka版本:kafka_2.10 Kafka官网下载:请点击 JDK版本:1.8.0_171 zookeeper-3.4.10 二.kafka安装配置 ...
- Python3学习笔记12-定义函数及调用
函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段,能提高应用的模块性,和代码的重复利用率 Python提供了许多内建函数,比如print().也可以自己创建函数,这被叫做用户自定义函数 ...
- unbuntu 16.04.2 安装 Eclipse C++开发环境
1.安装JAVA (1)首先添加源: sudo gedit /etc/apt/sources.list 在打开的文件中添加如下内容并保存: deb http://ppa.launchpad.net/w ...
- 超级wifi
超级wifi (super wi-fi)是相对于现有的wifi提出的改进版,执行响应的 802.11af标准. 802.11af 标准是2014年2月提出的,它的主要特点是"建议在电视频率之 ...