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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 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
php实现快速排序的三种方法分享
2014/03/12 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
js 页面输出值
2008/11/30 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
Python3之文件读写操作的实例讲解
2018/01/23 Python
python并发和异步编程实例
2018/11/15 Python
详解python中的index函数用法
2019/08/06 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
django框架创建应用操作示例
2019/09/26 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
大学应届毕业生个人求职信
2013/09/23 职场文书
大二学期个人自我评价
2014/01/13 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
初中生操行评语大全
2014/04/24 职场文书
党的生日活动方案
2014/08/15 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
初二学生评语大全
2014/12/26 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
好员工观后感
2015/06/17 职场文书
MySQL基础(一)
2021/04/05 MySQL
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL