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 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现本地存储
Dec 22 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上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
如何离线执行php任务
2017/02/21 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
python tqdm库的使用
2020/11/30 Python
Python用户自定义异常的实现
2020/12/25 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
初级Java程序员面试题
2016/03/03 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
2016新年晚会开场白
2015/12/03 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL