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& ...
随机推荐
- Js 对Dom的操作
一.DOM的概述 DOM(Document Object Model,文档对象模型)描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.这使得JavaScript操作HTML,不是在 ...
- qt 创建资源文件
我们编写的gui可能需要一些额外的资源(比如贴图用的图片),可用资源文件统一管理.以下以图片为例. 用qt creator 打开工程,为工程新建资源文件: 命名为“项目名.prc”,(此处为“cloc ...
- Oracle基础之count(1)和count(*)的区别
在数据库中Count(*)或者Count(1)或者Count([列])或许是最常用的聚合函数.很多人其实对这三者之间是区分不清的.本文会阐述这三者的作用,关系以及背后的原理. 我在网上看到一些所谓的优 ...
- qwewq
- 记录code修改
package com.hesheng.myapplication; import android.content.Context;import android.graphics.Bitmap;imp ...
- html的文件控件<input type="file">样式的改变
一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...
- eclipse中对Hadoop项目进行mvn clean install时报错的处理
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clean) ...
- 一个老IT产品管理者对于产品经理工作的经验总结
一个老IT产品管理者对于产品经理工作的经验总结 1. 任何行业,包括IT行业,所谓产品管理.产品经理,其核心应该是企业产品管理制度,也就是说,只有企业存在相应的.合理的产品管理体系和制度,产品管理.产 ...
- February 8 2017 Week 6 Wednesday
Goals determine what you are going to be. 目标决定你将成为什么样的人. Owning some goals in life means you will ha ...
- shell----删除文件中的^M
在Linux下使用vi来查看一些在Windows下创建的文本文件,有时会发现在行尾有一些“^M”.有几种方法可以处理. 1.使用vi的替换功能.启动vi,进入命令模式,输入以下命令: :%s/^M$/ ...