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 ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 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
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
详解python里的命名规范
2018/07/16 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
《灰椋鸟》教学反思
2014/04/27 职场文书
大学生实习证明范本
2014/09/19 职场文书
代收款委托书范本
2014/10/01 职场文书
生日宴会祝酒词
2015/08/10 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书