1

当访问者向下滚动网站时，我有一个向下滚动的侧边栏 div。问题是，它不会一直向下滚动，我知道为什么会这样。

我假设脚本在加载代码后立即计算文档的高度，但是网站上有不同大小的图像在计算完成后尚未加载，包括也将主图像更改为不同的缩略图单击后的大小。

如果我设置每个图像的高度，那么它会一直正确向下滚动，但我不可能知道然后在实时网站上动态生成的图像大小。

加载所有图像后，脚本有什么方法可以计算文档高度吗？或者其他可以工作的东西？

这是代码：

var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $("#maincontainer").height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 0);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});
4

2 回答 2

1

$('body').height()不起作用，因为body高度取决于视口大小。

此外， document.ready 不等待加载图像。这意味着，如果您的页面上有没有高度属性的图像，则最终加载的 DOM 会更高。

自己尝试一下：http: //jsfiddle.net/vww42sqm/（请注意。）

或者拿这个：

$(document).ready(function() {
    var documentHeight = $(document).height()
    console.log('document height (document.ready): ' + documentHeight);
});


$(window).load(function() {
    var documentHeight = $(document).height()
    console.log('document height (window.load): ' + documentHeight);
});
于 2013-05-06T14:46:08.603 回答
-1

将

$('body').height()

工作 ？我在我的网页上使用了相同类型的脚本，这就是我用来确定我的网页的高度的方法。

如果这不是您想要的或者它没有按照您想要的方式工作，我会为您提供更多代码。

编辑 ：

$(document).ready(function () {
    var documentHeight = $('body').height()
});

然后稍后你调用你的 documentHeight 而不是你的 window.scrollTop。

于 2012-06-29T20:21:23.603 回答