最近做项目用了到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()滚动条事件的更多相关文章

  1. jQuery scroll事件实现监控滚动条分页示例(转)

    这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...

  2. jQuery检测滚动条(scroll)是否到达底部

    一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height()    获取整个页面的高度 $(window).height()   ...

  3. Javascript和jquery事件--滚动条事件和自定义滚动条事件样式

    很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...

  4. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  5. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  6. jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部

    jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部:http://www.haorooms.com/post/jquery_scroll_upanddown //滚动条滚动加载更多内容 //判 ...

  7. jQuery——检测滚动条是否到达底部

    一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数:$(document).height()    获取整个页面的高度:$(window).height()    ...

  8. jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  9. 第一百六十九节,jQuery,基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

随机推荐

  1. CodeFirst时使用T4模板

    我们都知道T4模板用于生成相似代码. 在DBFirst和ModelFirst条件下我们很容易从.edmx下获取所有实体类和其名称,并且通过我们定义的模板和某些遍历工作为我们生成所需要的相似代码. 但是 ...

  2. 前端页面——Cookie与Session有什么差别

    我们在实际生活中总会遇到这种事情,我们一旦登录(首次输入username和password)某个站点之后,当我们再次訪问的时候(仅仅要不关闭浏览器),无需再次登录.而当我们在这个站点浏览一段时间后,它 ...

  3. Genymotion模拟器无法开启的解决方法——Unable to start the virtual device,The virtual device got no IP address

    前言 最近重装了电脑的系统,由win7换成了win8.1.android开发环境也重新配置了一遍.其他的都还好,就是genymotion模拟器一直开启失败. 自己尝试了很多方法,比如卸载重装软件,重新 ...

  4. Java学习路线图(如何快速学Java)

    不知不觉从初学Java到现在已经8年了,今天在这里给刚入门和入门不久的小伙伴们一些建议.可能总结的不是很详细,但给出了一个大概的学习路线.希望对大家有帮助哈~ 如何快速学Java 这里我以Java E ...

  5. C# dmp debug, can't load pdb file

    1.  Project->Properties->Build->Advance, Debug Info : Full/pdb-only . set to [none] will no ...

  6. MathType如何编辑大三角形符号

    MathType中包含的符号超过1000多个,可以满足我们很多学科的使用,尤其是数学中,涉及到很多的符号,常见的就是代数.几何这两大类,当然还有集合之类的符号使用也比较多.我们在用MathType编辑 ...

  7. 让Json更懂中文(JSON_UNESCAPED_UNICODE)

    我们知道, 用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似”\u***”的格式, 还会在一定程度上增加传输的数据量. <?php echo json_ ...

  8. [RN] 01 - Init: Try a little bit of React Native

    Ref: React Native跨平台移动应用开发 后记:这本书博客味有点浓. 本篇涉及新建工程的若干套路,以及一点语法知识. 创建新工程 (1) 解决的一大核心问题: (2) 使用Javascri ...

  9. C#------Aspose.cells使用方法

    转载: http://www.cnblogs.com/muer/p/yaxle.html 代码: public ActionResult ImportData(HttpPostedFileBase f ...

  10. Dubbo -- 系统学习 笔记 -- 示例 -- 线程模型

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 线程模型 事件处理线程说明 如果事件处理的逻辑能迅速完成,并且不会发起新的IO请求 ...