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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
vuex存值与取值的实例
Nov 06 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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/11/19 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
jquery中动态效果小结
2010/12/16 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
js自定义弹框插件的封装
2020/08/24 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
vue 中filter的多种用法
2018/04/26 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
python使用opencv对图像mask处理的方法
2019/07/05 Python
python set集合使用方法解析
2019/11/05 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
python构造IP报文实例
2020/05/05 Python
python软件都是免费的吗
2020/06/18 Python
python和JavaScript哪个容易上手
2020/06/23 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
副总经理工作职责
2013/11/28 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
见习报告的格式
2014/10/31 职场文书
2016春季运动会前导词
2015/11/25 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书