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实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现计算器功能
Oct 19 jQuery
jquery实现广告上下滚动效果
Mar 04 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 404错误页面实现代码
2009/06/22 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python urlopen 使用小示例
2008/09/06 Python
深入理解Python中的内置常量
2017/05/20 Python
浅析使用Python操作文件
2017/07/31 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python try...finally...的实现方法
2020/11/25 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
神路信息Java面试题目
2013/03/31 面试题
实体的生命周期
2013/08/31 面试题
销售主管的自我评价分享
2014/01/03 职场文书
决心书范文
2014/03/11 职场文书
初中学生期末评语
2014/04/24 职场文书
社会调查研究计划书
2014/05/01 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
诉讼和解协议书
2016/03/23 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python