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请求struts action实现异步刷新
Apr 19 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 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 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP模板解析类实例
2015/07/09 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
php-msf源码详解
2017/12/25 PHP
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python实现二维数组输出为图片
2018/04/03 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
django配置app中的静态文件步骤
2020/03/27 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
物理力学求职信
2014/02/18 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
委托培训协议书
2014/11/17 职场文书
消防安全月活动总结
2015/05/08 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL