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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jquery实现抽奖功能
Oct 22 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上传、管理照片示例
2006/10/09 PHP
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php编程每天必学之表单验证
2016/03/01 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
django框架forms组件用法实例详解
2019/12/10 Python
python装饰器代替set get方法实例
2019/12/19 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
财会自我鉴定范文
2013/12/27 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
JS数组去重详情
2021/11/07 Javascript