相关疑难解决方法(0)

jquery $(window).height()返回文档高度

我确定我正在制作一个简单的错误,但我只是提醒$(window).height()并返回相同的值$(document).height().

我的浏览器窗口高度为13"MBA和窗口高度,最大值介于780px - 820px(大致)之间,但每次返回的窗口高度与文档高度相同.在网站的每个案例中,我正在处理的是超过1000px.

这里发生了什么?

alert($(window).height());
alert($(document).height()); 
Run Code Online (Sandbox Code Playgroud)

jquery

102
推荐指数
2
解决办法
12万
查看次数

使用jQuery获取div的可见高度

我需要在可滚动区域内检索div的可见高度.我认为自己与jQuery相当不错,但这完全让我失望.

假设我在黑色包装中有一个红色div:

在上图中,jQuery函数将返回248,即div的可见部分.

一旦用户滚过div的顶部,如上图所示,它将报告296.

现在,一旦用户滚过div,它将再次报告248.

显然,我的数字不会像在这个演示中那样一致和清晰,或者我只是对这些数字进行硬编码.

我有一点理论:

  • 获取窗口的高度
  • 获得div的高度
  • 从窗口顶部获取div的初始偏移量
  • 用户滚动时获取偏移量.
    • 如果偏移为正,则意味着div的顶部仍然可见.
    • 如果它是负数,那么div的顶部已被窗口黯然失色.此时,div可以占据窗口的整个高度,也可以显示div的底部
    • 如果显示div的底部,请计算它与窗口底部之间的间隙.

看起来很简单,但我无法绕过它.明天早上我会再接受一次破解; 我只想你们中的一些天才可能会有所帮助.

谢谢!

更新:我自己想出来,但看起来下面的答案之一更优雅,所以我将使用它.对于好奇,这是我想出的:

$(document).ready(function() {
    var windowHeight = $(window).height();
    var overviewHeight = $("#overview").height();
    var overviewStaticTop = $("#overview").offset().top;
    var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
    var overviewStaticBottom = overviewStaticTop + $("#overview").height();
    var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
    var visibleArea;
    if ((overviewHeight + overviewScrollTop) < windowHeight) {
        // alert("bottom is showing!");
        visibleArea = windowHeight - overviewScrollBottom;
        // alert(visibleArea);
    } else {
        if (overviewScrollTop < 0) { …
Run Code Online (Sandbox Code Playgroud)

javascript jquery height visible

83
推荐指数
3
解决办法
5万
查看次数

当内容滚动到视图时激活CSS3动画

我有一个使用CSS3动画的条形图,当页面加载时动画当前激活.

我遇到的问题是给定的条形图由于之前的大量内容而被放置在屏幕外,所以当用户向下滚动到它时,动画已经完成.

我正在寻找通过CSS3或jQuery的方法来仅在观看者看到图表时激活条形图上的CSS3动画.

<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>
Run Code Online (Sandbox Code Playgroud)

如果你在页面加载后立即向下滚动,你可以看到它动画.

这是我的代码的一个问题.另外,我不知道这是否重要,但我在页面上有几个这个条形图的实例.

我遇到了一个名为waypoint的jQuery插件,但我完全没有运气.

如果有人能指出我正确的方向,那将是非常有帮助的.

谢谢!

jquery html5 scroll css3 css-animations

42
推荐指数
4
解决办法
8万
查看次数

标签 统计

jquery ×3

css-animations ×1

css3 ×1

height ×1

html5 ×1

javascript ×1

scroll ×1

visible ×1