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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jquery实现图片放大镜效果
Dec 23 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
jQuery代码优化方法总结
2018/01/29 jQuery
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
大三毕业自我鉴定
2014/01/15 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
2015年企业新年寄语
2014/12/08 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js