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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
详解jquery和vue对比
Apr 16 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python用户管理系统的实例讲解
2017/12/23 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python微信好友数据分析详解
2018/11/19 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
家长会邀请书
2014/01/25 职场文书
个人现实表现材料
2014/02/04 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015年体育部工作总结
2015/04/02 职场文书
初中班主任工作随笔
2015/08/15 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python