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& ...
随机推荐
- Python爬虫教程-33-scrapy shell 的使用
本篇详细介绍 scrapy shell 的使用,也介绍了使用 xpath 进行精确查找 Python爬虫教程-33-scrapy shell 的使用 scrapy shell 的使用 条件:我们需要先 ...
- mac apache服务器
//开启apache: sudo apachectl start //重启apache: sudo apachectl restart //关闭apache: sudo apachectl stop ...
- BEM,SASS,LESS,bootstrap:如何有效地将这些方法,工具和框架聪明地整合?
https://medium.com/@andersonorui_/bem-sass-and-bootstrap-9f89dc07d20f Bootstrap是一个“HTML,CSS和Javascri ...
- Windows ->> FIX: “The security database on the server does not have a computer account for this workstation trust relationship”
前几天在做AlwaysOn实验时遇到搭建活动目录域时某台已经加入AD的机器无法以域管理员账户登录的情况. 报错信息是:The security database on the server does ...
- 树的各种操作java
package mystudy; import java.io.UnsupportedEncodingException; import java.util.LinkedList; import ja ...
- 【Leetcode】【Medium】Divide Two Integers
Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...
- HTTP(一)
HTTP(一) http php http请求 HTTP请求:请求行.消息报头.请求正文.格式如下: Method Request-URI HTTP-Veraion CRLF 参数说明 Method ...
- gogs配置及迁移
工作需要迁移gogs,粗略记下笔记 操作系统:CentOS Linux release 7.4.1708 (Core) 防火墙:关闭状态,如有需要开启默认的3000端口 一.配置 首先安装git [r ...
- 从windows到linux的换行转换工具dos2unix
同学们也许知道,windows中的文本文件的换行符是"\r\n",而linux中是"\n".由于换行符的不同,所以有的时候会发生一些莫名其妙的状况.至于具体什么 ...
- BZOJ3503:[CQOI2014]和谐矩阵(高斯消元,bitset)
Description 我们称一个由0和1组成的矩阵是和谐的,当且仅当每个元素都有偶数个相邻的1.一个元素相邻的元素包括它本 身,及他上下左右的4个元素(如果存在). 给定矩阵的行数和列数,请计算并输 ...