jquery scroll()滚动条事件
最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现。
1.scroll()事件
当用户滚动指定的元素时,会发生scroll事件。适用于所有可滚动的元素和window对象(浏览器窗口)
$(select).scroll([Data],fn);
当(浏览器窗口)页面滚动条变化时,执行的函数,JQuery代码:
$(window).scroll(function(){
//do something...
});
2.scrollTop 获取匹配元素相对滚动条顶部的偏移
scrollTop(val)
获取页面滚动条的具体值:$(document).scrollTop();
设置相对滚动条的偏移值:$(document).scrollTop(300);
3.offset() 获取匹配元素在当前视口的相对偏移。
offset([coordinates])
获取元素的相对偏移:$(".bg02").offset().top;
设置元素的相对偏移:$(".bg02").offset({"top":1000, "left":0});
4.需求:当(浏览器窗口)页面滚动条值小于300px时隐藏div,大于300px时显示div
$(window).scroll(function(){
//var ds = document.documetElement.scrollTop || document.body.scrollTop; //js兼容获取滚动条
if($(document).scrollTop() < 300){
$(".position").css({"display":"none"});
}else{
$(".position").css({"display":"block"});
}
});
5.返回顶部和元素定位(1-10)
$(".position ul li").click(function(){
var num_index = $(this).index() + 1;
if(num_index < 10){
$("html,body").animate({scrollTop:$(".bg0" + num_index).offset().top},800);
}else if(num_ineex ==10){
$("html,body").animate({$(".bg"+num_index).offset().top},800);
}else if(num_index == 11){
$("html,body").animate({scrollTop:0},800);
}else{
return false;
}
});
jquery scroll()滚动条事件的更多相关文章
- jQuery scroll事件实现监控滚动条分页示例(转)
这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...
- jQuery检测滚动条(scroll)是否到达底部
一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height() 获取整个页面的高度 $(window).height() ...
- Javascript和jquery事件--滚动条事件和自定义滚动条事件样式
很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部
jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部:http://www.haorooms.com/post/jquery_scroll_upanddown //滚动条滚动加载更多内容 //判 ...
- jQuery——检测滚动条是否到达底部
一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数:$(document).height() 获取整个页面的高度:$(window).height() ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- 第一百六十九节,jQuery,基础事件
jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...
随机推荐
- Java JVM运行时数据区,内存管理和GC垃圾回收
一 . 运行时数据区 程序计数器是线程私有的,是一块很小的内存空间,是当前线程执行到字节码行号的计数指示器.每个CPU处理器核心 在任何一个时刻,都只可能运行着唯一的一个线程,执行着一条指令.所以在多 ...
- 国内各大安卓(Android)市场的上传方式、认领、通过审核有哪些不同,有什么值得注意的地方?
6 个回答 赞同89反对,不会显示你的姓名 唐元鹏,扯淡爱好者 Jc droid.李明亮.知乎用户 等人赞同 作为一个android菜鸟开发者,代码水平不咋样,却练就了一身上传app的本领,大体说一下 ...
- UNIX环境编程学习笔记(12)——文件I/O之目录操作
lienhua342014-09-18 1 引言 在 UNIX 系统中,目录是一种特殊的文件类型.我们可以使用 open 函数来打开目录,获取文件描述符,然后调用 stat 函数来获取目录的属性信息, ...
- 2013——M笔试南京——程序
迄今只参加了M南京笔试,可惜自己不是计算机出身,还有好多东西得学啊…… M的最后一题是编程: 输入:单链表L0.L1.L2……Ln-1.Ln,将链表变为:L0.Ln.L1.Ln-1.L2…… 算法: ...
- appium的xpath定位问题及常用方法
关于类似的帖子好像很多,但是没有找到具体能帮我解决问题的办法.还是自己深究了好久才基本知道app上面的xpath定位和web上的不同点: 先放一个图: A,先说说不用xpath的场景,一般是用于存在i ...
- 3. beeGo 自己写Controller 和 请求数据处理
Controller Controller等同于Django里的view,处理逻辑都是在Controller里面完成的,下面就写一个最简单的Controller. 我们在写自己的controller的 ...
- java okhttp包的类特点
1.开始使用这个包时候不习惯,觉得api用起来很别扭,不管是Request okhttpClient formBody只要是设置啥,就必须使用类里面的Builder类,然后一个方法接受一个参数,不停地 ...
- 为什么React事件处理函数必须使用Function.bind()绑定this?
最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...
- .NET Framework 4.0源代码
原文出处:http://blogs.microsoft.co.il/blogs/arik/archive/2010/07/12/step-into-net-framework-4-0-source-c ...
- ios开发之--比较两个数组里面的值是否相同
比较两个数组里面的内容是否相同,代码如下: NSArray *array1 = [NSArray arrayWithObjects:@"a", @"b", @& ...