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& ...
随机推荐
- world特殊控制符输入
特殊符号的输入表示法. 1,“^l”表示软回车(象这种“↓”). 2,“^p”表示硬回车. 3,“^t”表示制表符. 4,“^m”表示手动分页符. 5,“^+”表示长划线(—). 6,“^=”表示短划 ...
- Python爬虫教程-33-scrapy shell 的使用
本篇详细介绍 scrapy shell 的使用,也介绍了使用 xpath 进行精确查找 Python爬虫教程-33-scrapy shell 的使用 scrapy shell 的使用 条件:我们需要先 ...
- switch case 忘记 break
昨天纠结了很久的问题,一直找不到原因,早上发现是一个低级错误: private void selectButton(int id) { switch (id) { case 0: recommend_ ...
- qt 使用qtxlsx 读写excel
https://github.com/dbzhang800/QtXlsxWriter 下载qtxlsx地址 QtXlsx is a library that can read and write Ex ...
- js漂浮广告实现代码(合集经典)
<html> <head> <title>漂浮广告</title> <body> <div id="codefans_net ...
- 020hashlib模块
#里面内容没有见过,可能会比较难懂,需要找资料.我只是记录了视频中的用法,其他理解的东西,我直接理解,就没有写下来了.下面内容是视频演示过程 import hashlib m = hashlib ...
- IntelliJ IDEA自动补全变量名称和属性名称的快捷键
自动补全变量名称 : Ctrl + Alt + v 自动补全属性名称 : Ctrl + Alt + f
- RabbitMQ Windows环境搭建
1.0 RabbitMQ是用Erlang语言编写,因此安装RabbitMQ,首先要安装Erlang. Erlang的官网:http://www.erlang.org/ 文件:otp_win64_19. ...
- Unity3D Shaderlab 学习记录
unity3d 定制的表面着色器(Surface Shader)的标准输出结构是这种: struct SurfaceOutput { half3 Albedo; //反射率 half3 Norm ...
- 10、SpringBoot-CRUD登陆拦截
1.前端页面的设置 index.html <input type="text" class="form-control" name="usern ...