jquery scrolling div - calculate document height once the page is fully loaded?

Question

I have a scrolling sidebar div that goes downwards as the visitor scroll down the website. The problem is, it doesn't scroll all the way down and I figured out why that is.

I assume that the script calculates the height of the document as soon as the code is loaded, but there are images on the website in different sizes that are not loaded yet once that calculation is done, including thumbnails that also change the main image to different sizes once clicked.

If I set the height of each image, then it scrolls all the way down correctly, but it's impossible for me to know the image size that is then dynamically generated on the live website.

Is there any way for the script to calculate the document height once all the images are loaded? Or something else that would work?

Here is the code:

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

You could try replacing your `$(document).ready(function()` ( or `$(function()` ) with `$(window).load(function()`. The latter fires after all page assets (including images) are loaded, where the former fires immediately after only the DOM has loaded. http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load — Sparky, Jun 29 '12 at 20:33

Christoph Bach · Answer 1 · 2014-11-25T11:36:35.813

$('body').height() does not work, because the body height depends on the viewport size.

Also, document.ready does not wait for images to be loaded. That means, if you have images on your page without a height attribute, the final loaded DOM is higher.

Try it out yourself: http://jsfiddle.net/vww42sqm/ (Mind the note.)

Or take this:

$(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);
});

score -1 · Answer 2 · answered Jun 29 '12 at 20:21

Would

$('body').height()

work ? I'm using the same kind of script on my webpage and this is what I use to determine what height my webpage has.

I've got plenty more code for you if this is not what you are looking for or if it's not working the way you want.

EDIT :

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

And then later on you call your documentHeight instead of your window.scrollTop.

jquery scrolling div - calculate document height once the page is fully loaded?

2 Answers2