js jquery 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法
更新時間：2018年09月05日 11:11:54 作者：根子的數(shù)據(jù)庫
今天小編就為大家分享一篇js jquery 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<!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 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
微信小程序?qū)崿F(xiàn)全局狀態(tài)管理的方法整理
已知微信小程序中如果要做到全局狀態(tài)共享，常用的有四種方式，分別是globalData、本地緩存、mobx-miniprogram和westore，本文將帶大家看看mobx-miniprogram是如何實現(xiàn)的小程序的全局狀態(tài)管理，需要的可以收藏一下2023-06-06
最近再做個項目，需要檢查token過期，跳轉(zhuǎn)到登錄頁面，要求用戶重新登錄，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript手寫源碼之實現(xiàn)arrify轉(zhuǎn)數(shù)組
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)arrify轉(zhuǎn)數(shù)組，文中的示例代碼講解詳細，對我們學習JavaScript有一點的幫助，需要的可以參考一下2023-02-02
這篇文章主要介紹了javascript求日期差的方法,涉及JavaScript日期及字符串操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了java設計模式中觀察者模式，全文通過舉例子及代碼的形式進行了一個簡單的介紹，希望大家能夠理解并且學習到其中知識2021-08-08
本文給大家分享的是使用javascript實現(xiàn)的一個簡單的三級聯(lián)動菜單，非常簡單實用，有需要的小伙伴過來參考下吧。2015-03-03
很多朋友想在網(wǎng)站上插入自己的阿里旺旺在線聯(lián)系圖片，就像是和QQ一樣，小編為大家詳細講解了旺旺在線客服代碼以及旺旺客服代碼生成器，希望能夠幫助到大家。2018-01-01
這篇文章主要介紹了javascript動畫算法,實例分析了javascript實現(xiàn)動畫效果的實現(xiàn)及使用技巧,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了前端深入理解Typescript泛型概念，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
隨機展示小頭像，隨機數(shù)包括 位置、層級、大小、透明度 等2011-12-12