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实现瀑布流页面
Apr 11 jQuery
Jquery-data的三种用法
Apr 18 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery+ajax实现用户登录验证
Sep 13 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
php工具型代码之印章抠图
2018/07/18 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python with statement 进行文件操作指南
2014/08/22 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python中的字典遍历备忘
2015/01/17 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
追悼会上的答谢词
2014/01/10 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
小班下学期个人总结
2015/02/12 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
MySQL GRANT用户授权的实现
2021/06/18 MySQL