js中scrollTop()方法和scroll()方法用法示例


Posted in Javascript onOctober 03, 2016

本文实例讲述了js中scrollTop()方法和scroll()方法用法。分享给大家供大家参考,具体如下:

设置滚动条据顶部的高度:

$("div").scrollTop(100); //把 scroll top offset 设置为 100px

获得滚动条的高度:

$("div").scrollTop();//获得 scroll top offset

触发滚动事件

$(selector).scroll()

将函数绑定到滚动事件中:

$(selector).scroll(function)

监听滚动事件,判断当滚动到距离顶部700px时,将其position改为fixed:

$(window).scroll(function(){
var $scroll_height = $(".gray").scrollTop();
if($scroll_height > 700){
$(".hot-nav").addClass("fix-nav");
} else {
$(".hot-nav").removeClass("fix-nav");
}
})

这是jquery中的用法,

offset() 获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

top:$(this).offset().top+25+"px"

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
巧用canvas
Jan 21 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 #Javascript
JavaScript对象创建模式实例汇总
Oct 03 #Javascript
js实现的光标位置工具函数示例
Oct 03 #Javascript
js获取腾讯视频ID的方法
Oct 03 #Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 #Javascript
微信小程序 navigation API实例详解
Oct 02 #Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 #Javascript
You might like
PHP文件下载类
2006/12/06 PHP
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
nodejs基础应用
2017/02/03 NodeJs
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
Python timeit模块原理及使用方法
2020/10/10 Python
超市实习总结自我鉴定
2013/09/19 职场文书
工作时间上网检讨书
2014/02/03 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
2015年公司工作总结
2015/04/25 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
鸡毛信观后感
2015/06/11 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
对讲机知识
2022/04/07 无线电