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 zTree树插件动态加载实例代码
May 11 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jquery向后台提交数组的代码分析
Feb 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
一周学会PHP(视频)Http下载
2006/12/12 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
Linux操作面试题
2015/02/11 面试题
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
2014年党务公开方案
2014/05/08 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
python开发飞机大战游戏
2021/07/15 Python