js jquery 获取某一元素到浏览器顶端的距离实现方法
更新时间：2018年09月05日 11:11:54 作者：根子的数据库
今天小编就为大家分享一篇js jquery 获取某一元素到浏览器顶端的距离实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
<!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 获取某一元素到浏览器顶端的距离实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
用JS替换字符串时。只能替换掉字符串中第一个匹配对象,有时候需要替换全部的字符，下文是具体的实现方法，大家可以参考下2014-12-12
页面内的tab导航需要在滚动到视口顶部的时候进行吸顶,这个功能算是比较常见,也比较容易实现,下面就跟随小编一起学习一下JavaScript是如何实现元素吸顶效果的吧2023-10-10
这篇文章主要为大家分享了7个去伪存真的JavaScript面试题，希望本文可以帮助大家比较顺利的通过面试，感兴趣的小伙伴们可以参考一下2016-01-01
本文主要介绍了Axios去除重复请求方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
重写document.write实现无阻塞加载js广告(补充)
这篇文章主要介绍了重写document.write实现无阻塞加载js广告,需要的朋友可以参考下2014-12-12
详解在微信小程序的JS脚本中使用Promise来优化函数处理
这篇文章主要介绍了详解在微信小程序的JS脚本中使用Promise来优化函数处理，引入Promise确实能够很好的解决异步回调函数的可读性等问题，同时也使得我们调用的时候代码简洁一些，本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法2019-03-03
这篇文章主要为大家介绍了JS如何处理可视区域图片懒加载技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家详细介绍了原生JS实现酷炫分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
JavaScript操作DOM元素的childNodes和children区别
这篇文章主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下2015-04-04
为了避免变量之间的覆盖与冲突，可以生成命名空间，命名空间是一种特殊的前缀，在不同的匿名函数中，根据功能声明一个不同的命名空间2014-06-06
最新评论