滚动条事件window.onscroll
获取页面某一元素的绝对X,Y坐标
var
X = $(
'#ElementID'
).offset().top;
var
Y = $(
'#ElementID'
).offset().left;
获取相对(父元素)位置:
var
X = $(
'#ElementID'
).position().top;
var
Y = $(
'#ElementID'
).position().left;
相对浏览器,将指定div滚到到指定位置,其用法如下
$("html,body").animate({scrollTop: $(obj).offset().top},speed);
例:统战 DIV随滚动条位置高度发生变化
// 答题卡位置随滚动条变化
window.onscroll = function(){
var a = document.documentElement.scrollTop || document.body.scrollTop;//滚动条y轴上的距离
var b = document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度
var c = document.documentElement.scrollHeight || document.body.scrollHeight;//可视化的高度与溢出的距离(总高度)
var abc = $('.stb-content-test').offset().top;
// 若滚动高度大于
if(abc >= a){
$('.stb-content-answer-div').css('top', aaa - a + 'px') }
else{
$('.stb-content-answer-div').css('top','0')
}
}
滚动条事件window.onscroll的更多相关文章
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
$(function () { //绑定滚动条事件 //绑定滚动条事件 $(window).bind(&q ...
- window.onscroll页面滚动条滚动事件
用途一:"返回顶部": window.onscroll = function(){ var t = document.documentElement.scrollTop || do ...
- js的window.onscroll事件兼容各大浏览器
为窗口添加滚动条事件其实非常的简单, window.onscroll=function(){}; 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollT ...
- window.onscroll
http://www.w3help.org/zh-cn/causes/SD9013 1.各浏览器对 document.document.body.document.documentElement 对象 ...
- 浏览器事件window.onload、o…
原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...
- [转载]浏览器事件window.onload、onfocus、onblur、ons
原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...
- Javascript和jquery事件--滚动条事件和自定义滚动条事件样式
很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...
- 关于javascript的window.onscroll方法
---恢复内容开始--- 今天在学习javascript的过程中被onscroll这个东西堵了一下午.心情极度郁闷. 在高度较大的网页中,我们通常会加一个返回顶部的按钮,方便用户操作. 代码如下: & ...
- jquery scroll()滚动条事件
最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现. 1.scroll()事件 ...
随机推荐
- js点击空白处触发事件
我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;backgroun ...
- 严格别名规则“-fstrict-aliasing”和“-fno-strict-aliasing”及类型双关
“-fstrict-aliasing”表示启用严格别名规则,“-fno-strict-aliasing”表示禁用严格别名规则,当gcc的编译优化参数为“-O2”.“-O3”和“-Os”时,默认会打开“ ...
- MIT Molecular Biology 笔记1 DNA的复制,染色体组装
视频 https://www.bilibili.com/video/av7973580?from=search&seid=16993146754254492690 教材 Molecular ...
- hibernate之三种时态之间的转换
判断状态的标准 oid 和 session相关性 public class HibernateUtils { private static SessionFactory sessionFact ...
- centos常用命令--备份
端口打开 命令如下:/sbin/iptables -I INPUT -p tcp --dport 8080 -j ACCEPT #8080为指定端口 /etc/rc.d/init.d/iptables ...
- 准备用有人云平台和tlink.io云平台和电脑做云转发
初步想的是用有人做国网电表转发,用tlink.io做综合采集模块转发,耗时一天 然后用tlink.io的做二次前端开发,耗时两天 用有人做二次前端开发,耗时两天 最后可以试试用常见的OPC公网转发到这 ...
- android上的i-jetty (1)环境搭建
介绍下如果把android设备作为一个web服务器使用, 编译i-jetty 1. 将源码download下来,http://code.google.com/p/i-jetty/downloads/l ...
- codeforces877c
C. Slava and tanks time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- bootstrap1.2
<html> <head> <meta charset="UTF-8"> <title></title> ...
- 冲刺博客NO.5
今天做了什么:布局UI和效果图,学会了监听事件并销毁监听接口 SMSSDK.unregisterAllEventHandler(); 今天做的东西不多,没有遇到什么苦难