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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jquery实现上传图片功能
Jun 29 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和MySql来与ODBC数据连接
2006/10/09 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
javascript学习总结之js使用技巧
2015/09/02 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python Socket使用实例
2017/12/18 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python实现五子棋游戏
2019/06/18 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
蔬菜基地的创业计划书
2014/01/06 职场文书
竞选学委演讲稿
2014/09/13 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL