语法: $(element) scrollTop() /$(element) scrollTop(val) ;
eg: 当匹配元素为当前页面,那么当前滚动条到整个页面顶端的距离:
var winPos =$(window) scrollTop ();
$(element) offset()top ; $(element) offset()left ;
$( window ) scroll (function(event){
});
var div1 = $("#div1")offset()left;
var wid1 = $("#div1")width();
var div2 = $("#div2")offset()left;
var distances = div2 -(div1+wid1); //这种情况是两个div在的top相同,求距
代码:\x0d\•$(function(){\x0d\\x0d\•//获取要定位元素距离浏览器顶部的距离\x0d\\x0d\•var navH = $("nav")offset()top;\x0d\\x0d\•//滚动条事件\x0d\\x0d\•$(window)scroll(function(){\x0d\\x0d\•//获取滚动条的滑动距离\x0d\\x0d\•var scroH = $(this)scrollTop();\x0d\\x0d\•//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定\x0d\\x0d\•if(scroH>=navH){\x0d\\x0d\•$("nav")css({"position":"fixed","top":0});\x0d\\x0d\•}else if(scroH回答于 2022-11-16
$("#div_id")height();
// 获得的是该div本身的高度, (不包含padding,margin,border)
$("#div_id")outerHeight();
// 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
$("#div_id")outerHeight(true);
// 包含该div本身的高度, 以及padding,border,margin上下的总高度
$(window)height();
// 获取浏览器显示区域(可视区域)的高度
$(window)width();
// 获取页面的文档高度
$(document)height();
// 浏览器当前窗口文档的高度
$(documentbody)width();
// 浏览器当前窗口文档body的高度
$(document)scrollTop();
// 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
objoffset()top
// 某个元素的上边界到body最顶部的距离(在元素的包含元素不含滚动条的情况下)
$(obj)offset()top - $(window)scrollTop()。
拓展:
1、jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的 *** 作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。
2、jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。由于目前高校基本尚未开JavaScript的相关课程,目前jQuery的学习,使用,研究都仅限于在职Web程序员之间。
可以使用offset() 方法,该方法返回或设置匹配元素相对于文档的偏移(位置),该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
1、使用offset() 方法获取一个元素距离浏览器的顶部和左边的可视距离,代码如下:
<html><head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<script type="text/javascript">
$(document)ready(function(){
$("button")click(function(){
x=$("p")offset();
$("#span1")text(xleft);
$("#span2")text(xtop);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>
2、运行的结果如下:
获取浏览器显示区域的高度 : $(window)height();
获取浏览器显示区域的宽度 :$(window)width();
获取页面的文档高度 :$(document)height();
获取页面的文档宽度 :$(document)width();
获取滚动条到顶部的垂直高度 :$(document)scrollTop();
获取滚动条到左边的垂直宽度 :$(document)scrollLeft();
计算元素位置和偏移量:$(id)offset();
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
optionsrelativeTo指定相对计
算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
optionsscroll是否把
滚动条计算在内,默认TRUE
optionspadding是否把padding计算在内,默认false
optionsmargin
是否把margin计算在内,默认true
optionsborder是否把边框计算在内,默认true
子页面控制父页面:
parentdocumentdocumentElementscrollTop;
parentdocumentdocumentElementclientHeight;
以上就是关于JQuery监听页面滚动事件及scrollTop(),offset().top总结全部的内容,包括:JQuery监听页面滚动事件及scrollTop(),offset().top总结、用jquery怎么计算一个元素到另一个元素之间的距离急急急!!在线等、使用js或jq控制一个div,当滚动到页面顶部的时候固定在顶部,离开可继续滚动吗等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)