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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现穿梭框效果
Jan 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
实用函数5
2007/11/08 PHP
PHP学习 运算符与运算符优先级
2008/06/15 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
PHP代码优化的53个细节
2014/03/03 PHP
php微信公众平台开发类实例
2015/04/01 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP中header用法小结
2016/05/23 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
node中的session的具体使用
2018/09/14 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Django内容增加富文本功能的实例
2017/10/17 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python的help函数如何使用
2020/06/11 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
Java程序员面试90题
2013/10/19 面试题
北大自主招生自荐信
2013/10/19 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
物业管理计划书
2014/01/10 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
清洁工个人工作总结
2015/03/05 职场文书
银行求职信怎么写
2019/06/20 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫