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 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...
随机推荐
- 关于xml里的encoding
创建一个xml时 如果<?xml version="1.0" encoding="GB2312" ?>更改encoding的值为UTF-8,保存后 ...
- UpdateData()用法
一.总结UpdateData()函数 UpdateData(true);//用于将屏幕上控件中的数据交换到变量中. UpdateData(false);//用于将数据在屏幕中对应控件中显示出来. ...
- 使用go,基于martini,和websocket开发简易聊天室
一.首先,需要了解一下websocket基本原理:here 二.go语言的websocket实现: 基于go语言的websocket也有不少,比如github.com/gorilla/websocke ...
- CentOS6.5下安装iRedMail中需要解决的问题
iRedMail是个专门用于Redhat/CentOS下的企业Mail服务集成安装软件包,本来只要有干净的系统就可以轻松安装,无奈国内网络状况和墙头众多,安装中也有很多问题需要解决,下面记录的都是我安 ...
- 百度云高速下载Pandownload
对于一些文件大小比较小的文件,可以直接在网页分享中点击[下载]来下载: 但是,对于较大点的文件,点击[下载]会弹出百度云的桌面客户端软件来下载: 但但是,下载速度实在是太慢了,强迫症真真等不及啊~ 幸 ...
- 【转】Java中的多线程学习大总结
多线程作为Java中很重要的一个知识点,在此还是有必要总结一下的. 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: 上图中基本上囊括了Java中多线程 ...
- linux环境中安装ftp服务
需求说明: 今天项目中有一个新的需求,需要在linux环境中搭建一个ftp服务,在此记录下. 操作过程: 1.通过yum的方式安装ftp服务对应的软件包 [root@testvm01 ~]# yum ...
- windows7 安装IIS没有default web site 解决方法
因当时是第一次在Windows 7上使用IIS,不小心把default web site删除了,后来无论怎么重装IIS都不行,最后想到能不能直接把别人安装好后的IIS相关文件夹拷过来使用,用宿舍一哥们 ...
- 爬豆瓣影评,记下解决maximum recursion depth exceeded in cmp
#主要是爬取后给别人做自然语言分析,没其他意思. #coding=utf8 import requests,re from lxml import etree import sys reload(sy ...
- PMP模拟考试-2
1. Increasing resources on the critical path activities may not always shorten the length of the pro ...