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 jquery 获取某一元素到浏览器顶端的距离实现方法 的全部内容, 来源链接: utcz.com/z/333056.html

回到顶部