js与jquery获得页面大小、滚动条位置、元素位置
//页面位置及窗口大小
function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY)
{ // Mozilla
scrW = window.innerWidth + window.scrollMaxX;
scrH = window.innerHeight + window.scrollMaxY;
}
else if(document.body.scrollHeight > document.body.offsetHeight)
{ // all but IE Mac
scrW = document.body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body)
{ // IE Mac
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight)
{ // IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
} // for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW;
var pageH = (scrH<winH) ? winH : scrH;
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
};
//滚动条位置
function GetPageScroll()
{
var x, y; if(window.pageYOffset)
{ // all except IE
y = window.pageYOffset;
x = window.pageXOffset;
} else if(document.documentElement && document.documentElement.scrollTop)
{ // IE 6 Strict
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) { // all other IE
y = document.body.scrollTop;
x = document.body.scrollLeft;
}
return {X:x, Y:y};
}
jquery
获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();
获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
计算元素位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把 滚动条计算在内,默认TRUE
options.padding 是否把padding计算在内,默认false
options.margin 是否把margin计算在内,默认true
options.border 是否把边框计算在内,默认true
分享到:
相关推荐
总的来说,无论是使用纯JavaScript还是JQuery,都可以灵活地获取页面的尺寸、滚动条位置和元素位置。对于开发者而言,了解并掌握这些方法将有助于提高前端开发的效率和质量。希望本文所提供的知识点能够帮助大家在...
4. **计算元素位置**:当页面滚动时,我们需要重新计算元素相对于视口的位置。可以使用`$(window).scrollTop()`获取当前滚动条在垂直方向上的位置,然后结合元素的原始位置,确保元素始终处于屏幕的特定位置。 5. *...
2. **初始化插件**:通过jQuery选择器选择需要应用滚动条的元素,并调用`.mCustomScrollbar()`方法进行初始化。 3. **配置选项**:可以设置各种参数来定制滚动条的行为,例如`scrollInertia`用于设置滚动速度,`...
总结来说,通过结合jQuery、CSS和JavaScript,我们可以创造出与网站设计风格相匹配的、具有动画效果的滚动条,从而提升用户的浏览体验。记得在实践中不断测试和优化,确保滚动条在各种设备和浏览器上都能正常工作。
在回调函数中,我们需要获取当前滚动条的位置,这可以通过`$(window).scrollTop()`来实现。根据滚动条的位置,我们可以计算出哪些内容应该显示,哪些应该隐藏。如果页面内容被分成了多个部分(通常每个部分占据一...
这个插件可能通过监听滚动事件,动态改变滚动条的大小、位置和样式,以实现定制化的用户体验。 在CSS方面,我们可以使用伪元素`:hover`, `:active`和`:focus`来控制滚动条的状态,以及`::-webkit-scrollbar`和`::-...
标题中的“jquery随页面滚动最终固定顶部的导航条插件”指的是一个基于jQuery的JavaScript插件,该插件实现了一种交互效果:当用户在网页上滚动时,导航条会从页面底部开始移动,随着页面的向下滚动逐渐靠近顶部,...
4. 可能还需要处理滚动条的自动绑定,例如当页面加载或窗口大小改变时,确保滚动效果始终有效。 总的来说,"jQuery平滑页面滚动切换特效"是通过jQuery库和相关的JavaScript技巧实现的,结合CSS和图片资源,为用户...
总结来说,为了使滚动条不影响页面宽度,需要将页面元素的宽度与浏览器窗口宽度一致,并隐藏水平滚动条,同时注意保持内部布局元素的宽度一致性,并留心隐藏滚动条可能带来的布局问题。在实际操作中,还需要根据具体...
5. **条件判断**:在用户滚动到特定位置时,通过比较元素位置与视口位置,可以决定是否启动动画。例如,当元素的顶部距离小于或等于视口的底部时,可以开始淡入动画。 6. **CSS准备**:为了实现淡入效果,需要预先...
<title>jQuery滚动条效果 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> .scrollable { height: 200px; overflow-y: scroll; border: 1px solid #ccc; } <!-- 很多内容 -->...
`scrollTop`获取当前滚动条的垂直位置。如果滚动的距离超过了固定层的初始位置(即`.fixed-header`的偏移量),我们就给它添加一个"class='fixed'",这将在CSS中定义为固定定位。反之,如果回到顶部,就移除这个...
这一功能对于提升用户体验非常重要,尤其是在长篇文档、论坛或博客等场景下,用户可能需要在阅读过程中进行其他操作,然后再回到阅读的地方,此时保存滚动条位置的功能就显得尤为必要。 ### 一、基本原理 在网页中...
在jQuery中,我们可以使用`$(window).scroll()`函数来监听滚动事件,`$(window).scrollTop()`获取当前滚动条的位置。 **二、创建HTML结构** 首先,我们需要一个基本的HTML页面结构,包含多个需要切换的区块。这些...
- 计算滚动位置:`$(window).scrollTop()`获取当前滚动条距离顶部的距离。 - 检测可视区域:通过比较滚动位置和各个页面区域的位置,判断哪个页面部分处于视口内。 - 切换导航高亮:当检测到某个页面部分在视口内...
标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能,即在用户滚动网页时,使指定的DIV元素始终保持在屏幕的某个固定位置,这种效果通常被称为“粘性导航”或“固定定位”。...
jQuery提供了`animate()`方法,可以用来改变元素的CSS属性,包括滚动条的位置。这里我们创建一个函数,用于监听点击事件,并平滑滚动到页面指定的位置: ```javascript $(document).ready(function() { // 假设...
<title>jQuery滚动条示例 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> #scrollArea { width: 300px; height: 200px; overflow: auto; } .content { height: 500px; /* 创建...
在IT行业中,jQuery是一个广泛使用的...总的来说,jQuery滚动条的实现涉及到了JavaScript编程、CSS样式设计以及jQuery插件的应用。通过这些技术,开发者能够创造出既美观又实用的滚动条效果,提升用户的浏览体验。