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使用ajax异步传输
- jquery 源码分析之Deferred
- 写JQuery插件的基本知识
- jQuery模拟黑客帝国矩阵效果实例
- jquery mobile 问问多多
- jquery简单案例
- 程序猿必要10免费的钱jquery小工具
- jQuery来源学习笔记:扩展的实用功能
- jQuery模拟黑客帝国矩阵效果实例
- jQuery mobile 入门笔记
- JQuery 提示框,提示信息
- Jquery 常用笔记 (一)
- 使用jQuery.form插件,实现完美的表单异步提交
- jQuery语法
- 15个最佳jQuery的翻页书效果的例子
- jQuery.form 上传文件
- jquery验证后ajax提交,返回消息如何统一显示的问题
- CSS/JQuery元素选择器之&&和||,选择器的逻辑操作
- jQuery学习(选择器)
- jquery中checkbox选中的问题之prop&attr惹的祸