`
everlxq
  • 浏览: 110157 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

(document).height()与$(window).height()

 
阅读更多
  jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用.

  注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变,但是jQuery(document).height()是不变的。

 

$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

要获取顶端 只需要获取到scrollTop()==0的时候  就是顶端了

要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height()  就可以知道已经滚动到底端了

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

自己做个实验就知道了 
$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->

分享到:
评论

相关推荐

    document.body.scrollTop用法

    - **window.screen.height** 和 **window.screen.width**: 屏幕分辨率的高度和宽度。 - **window.screen.availHeight** 和 **window.screen.availWidth**: 可用工作区的高度和宽度。 ##### 3. 兼容性问题 - 在不同...

    浅谈DOCTYPE对$(window).height()取值的影响

    前言:公司项目需要用到一个弹框垂直居中,网上类似的垂直居中弹出层大同小异,因为项目是基于Jquery 下的,所以用$(window).height()-layer.height())/2 +$(document).scrollTop()取得垂直的位移。测了各种浏览器没...

    JS,Jquery获取各种屏幕的宽度和高度

    ### JS与jQuery获取屏幕宽度和高度的相关知识点 在前端开发中,经常需要获取用户的屏幕尺寸信息,例如宽度和高度等,这些数据对于响应式设计、布局调整等方面具有重要作用。通过JavaScript(简称JS)和jQuery这两种...

    字符串 window.open() window.opener window.name window对象等的总结

    在JavaScript的世界里,`window`对象是全局对象,它提供了与浏览器窗口进行交互的各种方法和属性。本篇文章将深入探讨`window.open()`、`window.opener`、`window.name`以及`window`对象的一些核心概念,同时通过两...

    jquery 设置height页面自动适应高度布局效果代码

    $("#content").height(windowHeight - headerHeight - footerHeight); } // 初始设置 setHeight(); // 监听窗口大小变化 $(window).on('resize', function() { // 使用防抖或节流技术可在此处添加 set...

    页面自动刷新无限循环滚屏

    if ($window.scrollTop() + windowHeight &gt;= $(document).height()) { $window.scrollTop(0); } }); $window.animate({ scrollTop: $(document).height() }, 2000); ``` 这段代码首先获取窗口的高度和文档的总...

    jQueryscroll事件实现监控滚动条分页示例.pdf

    `$(window).height()`与`$(document).height()`的区别 这两个函数返回的是不同的高度值: - `$(window).height()`:返回浏览器窗口可视区域的高度,即用户当前能看到的页面部分的高度。这个值会随着浏览器窗口...

    javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf

    windowHeight = document.documentElement.clientHeight; } else if (document.body) { windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the ...

    计算Web页面的高度并给div赋高度

    var height1 = window.screen.availHeight - (window.screenTop + (window.screen.height - window.screen.availHeight)); var top = document.getElementById("top").offsetHeight; var foot = document....

    任意拖动提示框大小的jquery弹出窗口代码

    newHeight = $(window).height() - (event.clientY - $(window).scrollTop()); newHeight = Math.max(100, newHeight); $('#popup').height(newHeight); break; case 'width': newWidth = $(window).width() -...

    浅谈$(document)和$(window)的区别

    在有滚动条的情况下,`$(document).height()` 通常会大于 `$(window).height()`。 下面是一个简单的示例,演示如何获取并比较这两个高度: ```javascript $(document).ready(function() { var docHeight = $...

    用jquery修改元素css的height属性值

    $("#myElement").css("height", windowHeight); }); ``` 在这个示例中,当窗口大小改变时,元素的高度将自动调整为与窗口高度相同。 同时,jQuery 提供的 `$(document).ready()` 函数确保在页面加载完成后再执行...

    JQuery获取当前屏幕的高度宽度的实现代码

    2. **$(document).height()**: 与$(window).height()不同,$(document).height()返回整个HTML文档的高度,包括用户当前无法看到的部分(超出可视区域的部分)。即使用户滚动页面,这个值始终保持不变,因为它表示...

    jquery图片的缩放 jquery局部选取

    var scale = Math.min(windowWidth / imgWidth, windowHeight / imgHeight); // 设置新的尺寸 $('#yourImage').css({ width: imgWidth * scale, height: imgHeight * scale }); }); ``` 3. 缩放动画:...

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

    $(window).height();//是文档窗口高度 $("div").offset().top//是标签距离顶部高度(没有到下面的距离,比如$("div").offset().down) $("div").offset().left//是标签距离右边高度(没有到下面的距离,比如$("div")...

    jquery获取文档高度和窗口高度汇总

    jquery获取窗口高度和窗口高度,$(document).height()、$(window).height() $(document).height():整个网页的文档高度 $(window).height():浏览器可视窗口的高度 $(window).scrollTop():浏览器可视窗口顶端...

    game-of-life:人生游戏

    $(document).ready(function(){$(window).resize();}); $(window).resize(function(){var canvas = document.getElementById(“ theCanvas”); //重新调整画布的大小以适合整个屏幕。在这里,请...

    jQuery窗口、文档、网页各种高度的精确理解

    用一句话理解就是:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。 当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。 不建议使用$...

Global site tag (gtag.js) - Google Analytics