Jquery中用offset（）.top和offsetTop的比较

今天，想测试一个div与顶部的距离，用的是.offsetTop，但是offsetTop获得的值，怎么都打印不出来。折腾了半天，打印的结果都是undefined，虽然网上很多资料都说返回的是数值。虽然这个函数永不了，但是黄显钦找到了一个可以替代offsetTop的函数。那就是jquery的offset().top

我们先来了解一下，什么是offset（）.top和offsetTop？

offsetTop

解析一：

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。

解析二：

当前对象到其上级层顶部的距离.

不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

这是从网上找到的两种解析，您看着用，我也没搞懂，主要是打印不出offsetTop来。

如果需要获取当前元素到document的高度，建议使用jquery的offset().top。下面我们解析一下offset().top。

offset().top

offset()的top是指元素与document的上边的距离，而不是浏览器当前窗体的上边缘，如图1。

图1：document高度超过window，浏览器出现滚动条，滚动滚动条，提交按钮的offset不变。

图2：document中的div有滚动条，提交按钮的offset随div的滚动变化而变化，与document无关

从上面这两个图，我们就知道jquery的offset.top的用法区别了。

实例一：判断DIV何时出现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>js</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {var a = document.getElementById("eq").offsetTop;console.log("offsetTop:",a);var b = $(window).scrollTop();var c = $(window).scrollTop()+$(window).height();console.log("window.scrollTop:",b);if (c >= a) {console.log("----",a,c);}
});
});
</script>
</head>
<body>
<div style="width:1px;height:2000px;"></div>
<div id="eq" style=" width:100px; height:100px; background-color:Red;">1</div>
<div style="width:1px;height:2000px;"></div>
</body>
</html>

实例二：

类似豆瓣主页的热门活动，当滚动到那的时候一直在顶部

//返回顶部$('.toTopShortBtn').hide();var back = $('.toTopShortBtn a');back.click(function() {var timer = setInterval(function(){$(window).scrollTop($(window).scrollTop()-50);if($(window).scrollTop() == 0){clearInterval(timer);}},2);});var a = $(".hothuodong").offset().top;$(window).scroll( function() {if($(window).scrollTop() > 400){$('.toTopShortBtn').show();}else{$('.toTopShortBtn').hide();}var b = $(window).scrollTop();if (b >= a) {$(".hothuodong").css('position','fixed');}else{$(".hothuodong").css('position','static');}});

转载于:https://www.cnblogs.com/as3lib/p/6789647.html

Jquery中用offset（）.top和offsetTop的比较相关推荐

offset().top与offsetTop的区别
转载:原博文地址 offset().top是jQuery的方法,需要引入jQuery才能使用,它获取的是你绑定元素上边框相对于文档顶端的偏移量,我们可以吧文档理解成一幅图,这幅图包含了html,htm ...
offsetTop，offset().top
原文:here offsetTop与offset().top相同点: 1.当无滚动条且offsetTop与offset().top参照对象相同时,它们获取的值相同. offsetTop与offset( ...
js原生实现jquery方法offset()和position()
$(() => {console.log($('p').offset())console.log($('p').position())console.log(offset($('p')[0])) ...
jquery中offset和position的区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个×××属性:top 和 lef ...
.offset().top是什么意思？
offset获取匹配元素在当前视口的相对偏移: 返回的对象包含两个整形属性:top,left.此方法只对可见元素有效. $("#div").offset() 获得位移对象:(此时 ...
一个非常超级可爱的滚动到顶端(Back to top)的jQuery插件- jQuery Back to Top
日期:2011/11/17 来源:GBin1.com 今天介绍一个非常可爱漂亮的滚动到顶端的插件,无需设置.它能快速的将页面里的元素添加滚动到顶端的功能.而且只在滚动时才出现,当滚动到顶端自动消失. ...
div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"><div class="ce- ...
css里slidebottom,jquery - 从CSS“top”到“bottom”的jQuery动画 - 堆栈内存溢出
编辑:不得不快速离开,所以没有完成,我决定使用jquery ui作为例子(你需要核心): #line_three { width:100%; } .line3_top { position:absol ...
jQuery中用ajax访问php接口文件
js代码 function ajax_request(){var result;var articleId = new Object();articleId=getArticleId();$.ajax ...

Jquery中用offset（）.top和offsetTop的比较

Jquery中用offset（）.top和offsetTop的比较相关推荐

最新文章

热门文章