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

如下所示：

<!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 获取某一元素到浏览器顶端的距离实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery.pagination.js分页使用教程

    jquery.pagination.js分页使用教程

    简单介绍一下在动态网页里面的jquery.pagination.js分页的使用,具体内容如下 添加下载的js和样式,主要是先添加jquery.js 再添加jquery.pagination.js,我这是下载好的,放在本地 <link rel="stylesheet" href="<%=path%>css/pagination.css" type="text/css"> <script type="text/

  • 用jQuery将JavaScript对象转换为querystring查询字符串的方法

    在get方式的参数传递中,常常需要将JavaScript对象,转换成查询字符串,比如: { method: 'get', state: '200' } 会转换成 ?method=get&state=200 方法1:用JavaScript serialize = function(obj) { var str = []; for (var p in obj) if (obj.hasOwnProperty(p)) { str.push(encodeURIComponent(p) + "=&q

  • 浅谈JS和jQuery的区别

    浅谈JS和jQuery的区别

    一.本质上的区别 1.JavaScript 是通过标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是一个JavaScript函数库.或者说是JavaScript. 使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如: 库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度.另外一个好处是显而易见的,

  • JS与jQuery判断文本框还剩多少字符可以输入的方法

    本文实例讲述了JS与jQuery判断文本框还剩多少字符可以输入的方法.分享给大家供大家参考,具体如下: javascript部分: function $(id) { return document.getElementById(id); } var maxLen=255; function checkMaxInput(){ if($("summary").value.length>maxLen){ $("summary").value=$("summ

  • JS/jQuery实现获取时间的方法及常用类完整示例

    JS/jQuery实现获取时间的方法及常用类完整示例

    本文实例讲述了JS jQuery实现获取时间的方法及常用类.分享给大家供大家参考,具体如下: 效果图 源码解析 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS获取时间的方法及常用类</title> <style type="text/css"> input{ color:red; min-width: 25

  • jQuery扩展方法实现Form表单与Json互相转换的实例代码

    JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.toJson = function () { var self = this, json = {}, push_counters = {}, patterns = { "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\]

  • jQuery序列化form表单数据为JSON对象的实现方法

    jquery提供的serialize方法能够实现. $("#searchForm").serialize(); 但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串. serialize确实是能够解决一般的提交数据.但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象). 方法如下: (function(window, $) { $.fn.serializeJs

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

    如下所示: <!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> <bod

  • js jquery获取当前元素的兄弟级 上一个 下一个元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得s的下一个兄弟节点 var ps=s.previousSbiling;  //得到s的上一个兄弟节点 var fc=s.firstChild;   //获得s的第一个子节点 var lc=s.lastChile;   //获得s的最后一个子节点 JS获取节点父级,子级元素 先说一下JS的获取方法,其

  • Jquery获取第一个子元素简单实例

    如获取id为divId的div下的第一个子div $("#divId").children("div").get(0) 但得到的是一个dom对象,如果要得到Jquery对象,要使用 $($("#divId").children("div").get(0)) 以上这篇Jquery获取第一个子元素简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jquery获取元素到屏幕四周可视距离的方法

    实例如下: $(window).height();//是文档窗口高度 $("div").offset().top//是标签距离顶部高度(没有到下面的距离,比如$("div").offset().down) $("div").offset().left//是标签距离右边高度(没有到下面的距离,比如$("div").offset().right) $(document).scrollTop();//是滚动条高度 $("d

  • jquery获取复选框checkbox的值的简单实现方法

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值

  • JS/jQuery实现DIV延时几秒后消失或显示的方法

    本文实例讲述了JS/jQuery实现DIV延时几秒后消失或显示的方法.分享给大家供大家参考,具体如下: 1.最常用的方法(setTimeout): <script language='javascript' type='text/javascript'> $(function () { setTimeout(function () { $("divid").show(); }, 6000); }) </script> 2.第二种方法(delay) jquery

  • JS实现获取毫秒值及转换成年月日时分秒的方法

    JS实现获取毫秒值及转换成年月日时分秒的方法

    本文实例讲述了JS实现获取毫秒值及转换成年月日时分秒的方法.分享给大家供大家参考,具体如下: 时间日期对象 创建方式一 var date=new Date(); 创建方式二 兼容性最强 推荐使用 var date1=new Date("2017/08-26 15:15:15"); 创建方式三 var date2=new Date(2017,9,18,23,15,23); 返回结果是从1970/01/01到现在的毫秒值 var date = Date.now(); var date =

  • JS函数修改html的元素内容,及修改属性内容的方法

    修改元素内容: <body> <p id="pid">Hello</p> <button onclick="demo()">按钮</button> <script> function demo(){ var nv = document.getElementById("pid"); nv.innerHTML="World"; } </script>

  • js与jquery获取父级元素,子级元素,兄弟元素的实现方法

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素.可以用: 比如: <div id="dom">    <div></div>    <div></div>    <div></div></div> var

  • JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

    最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ 先给大家上干货: [js的获取方式] <div id = "dom">          <div></div>           <div></div>      <div></div>  </div> function dom(){ var a = document.getElementByIdx_x_x(&qu

随机推荐