JQuery监听页面滚动事件及scrollTop(),offset().top总结

JQuery监听页面滚动事件及scrollTop(),offset().top总结,第1张

语法: $(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,当滚动到页面顶部的时候固定在顶部,离开可继续滚动吗等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9736410.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存