欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

js jquery 获取某一元素到浏览器顶端的距离实现方法

程序员文章站 2022-05-17 23:41:25
如下所示：

如下所示：

<!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实现基本淡入淡出效果的方法详解

下一篇： 3gp转换工具-avi/flv/rmvb/3gp格式转换器图文使用教程

推荐阅读