js jquery 获取某一元素到浏览器顶端的距离实现方法


Posted in jQuery onSeptember 05, 2018

如下所示:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
  body{
   margin: 0;
   padding: 0;
  }
  .mdiv{
   width: 100px;
   height: 100px;
   background-color: red;
  }
 </style>
</head>
 
<body>
<div style="height: 1000px"></div>
<div class="banner"></div>
<script src="jquery.js"></script> //自行下载
<script>
 //原生
 //获取div距离顶部的距离
 var mTop = document.getElementsByClassName('banner')[0].offsetTop;
 //减去滚动条的高度
 var sTop = document.body.scrollTop;
 var result = mTop - sTop;
 console.log(result);
 //Jquery
 mTop = $('.banner')[0].offsetTop;
 sTop = $(window).scrollTop();
 result = mTop - sTop;
 console.log(result);
</script>
</body>

以上这篇js jquery 获取某一元素到浏览器顶端的距离实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 #jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 #jQuery
jQuery常见的遍历DOM操作详解
Sep 05 #jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 #jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
You might like
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
JS定时器实例
2013/04/17 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python Cookie 读取和保存方法
2018/12/28 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
物业管理个人自我评价
2013/11/08 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers