Question

当访问者向下滚动网站时，我有一个向下滚动的侧边栏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
            });
        };
    });
});

Answer 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);
});

Answer 2

会

$（ '主体'）。高度（）

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

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

编辑：

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

然后再调用documentHeight而不是window.scrollTop。

jquery scrolling div - 一旦页面完全加载，计算文档高度？

2 个答案: