js滚动监听
下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码
|
1
2
3
4
5
6
7
8
|
window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 0) { $(".cbbfixed").css("bottom", "10px"); } else { $(".cbbfixed").css("bottom", "-85px"); } } |
注:
t:滚动条距离top端的距离
t>0,即滚动条一旦滚动,立即执行if()语句,else()中的代码是,滚动条到到top处时,返回顶部的div隐藏
返回顶部按钮的点击操作:
|
1
2
3
4
|
$("#cgotop").click(function(){ $('body,html').animate({ scrollTop: 0 }, 100); return false; }); |
补充:
1、监听某个元素的滚动条事件
|
1
|
$(selector).scroll(function(){.......}); |
2.获取滚动条滚动的距离
|
1
2
|
$(selector).scrollTop();$(selector).scrollLefft(); |
PS:这里再为大家推荐一款关于JS事件的在线查询工具,归纳总结了JS常用的事件类型与函数功能:
javascript事件与功能说明大全:
http://tools.jb51.net/table/javascript_event
js滚动监听的更多相关文章
- Bootstrap入门(二十六)JS插件3:滚动监听
很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...
- js和jquery实现页面滚动监听
js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...
- bootstrap源码之滚动监听组件scrollspy.js详解
其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...
- Bootstrap学习js插件篇之滚动监听
1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
- 滚动监听(bootstrap)
1.05 腊八节 一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...
- Bootstrap滚动监听
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- Bootstrap 下拉菜单和滚动监听插件
一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- bootstrap的滚动监听
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
随机推荐
- 用C读取INI配置文件
http://blog.csdn.net/chexlong/article/details/6818017 #define CONF_FILE_PATH "Config.ini" ...
- java中double类型显示两个小数,比如12.00
Double类型的数据如何保留两位小数? 各位大虾,现有Double类型的数据,如何转换为保留两位小数的数,返回值的类型仍然是Double类型的,而不是字符串类型. 比如 0,返回“0.00” ...
- 未在本机注册Microsoft.ACE.OleDb.12.0
服务器版本:Windows Server 2008 R2 64位.IIS7 已经安装了Microsoft Access database engine 2010 X64. 在服务器上可以用SQL Se ...
- javascript小练手
1.做一个小图标在界面中通过按钮可以变大 变小 变色 变圆 <!DOCTYPE html> <html lang="en"> <head> &l ...
- Python学习---同步条件event/队列queue1223
写在前面: 在使用这些共享API的时候,我们要注意以下几点: 在UNIX平台上,当某个进程终结之后,该进程需要被其父进程调用wait,否则进程成为僵尸进程(Zombie).所以,有必要对每个Proce ...
- Hadoop学习---Ubuntu中hadoop完全分布式安装教程
软件版本 Hadoop版本号:hadoop-2.6.0-cdh5.7.0: VMWare版本号:VMware 9或10 Linux系统:CentOS 6.4-6.5 或Ubuntu版本号:ubuntu ...
- 设计模式:备忘录(Memento)模式
设计模式:备忘录(Memento)模式 一.前言 备忘录模式用于保存和恢复对象的状态,相信大家看过我前面的拙作就会想到原型模式也能保存一个对象在某一个时刻的状态,那么两者有何不同的呢?原型模式保存 ...
- 设计模式:仲裁者(Mediator)模式
设计模式:仲裁者(Mediator)模式 一.前言 Mediator模式又称为仲裁者模式或者中介者模式,所起的作用是仲裁和中介,帮助其它类之间进行交流.在仲裁者模式之中,我们要明确两个概念,那 ...
- AutoHotkey使用Excel的Com对象可能导致进程残留问题的原因及解决方案
在AutoHotkey脚本中,对Excel的应用体验很不错,xl := ComObjActive("Excel.Application")就和当前Excel表连接了, 通过xl变量 ...
- Apache PredictionIO在Docker上的搭建及使用
1.Apache PredictionIO介绍 Apache PredictionIO 是一个孵化中的机器学习服务器,它可以为为开发人员和数据科学家创建任何机器学习任务的预测引擎.官方原文: Apac ...