CODEWITHSUNDEEP
jquerydomheightappend
user990463
user990463

Reputation: 439

jQuery change the .height when appending content

I have this jQuery function which get the height of my document and stick a div to the view.

It works fine when the content is already here when the DOM is loaded but if I append some li to my container I would like to refresh this function to get the new document height

Here's the js code :

$(function()
{
    var documentHeight = 0;
    var topPadding = 55;

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

And the structure of HTML :

<div id="single_content">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        ...
    <ul>
</div>

I think I need something with on.change > update the document height to use in my function?

Thanks for help!

SOLVED :

I found the solution by placing this : $(document).height(); inside the $(window).scroll(function() {});

Thanks for answers!

Upvotes: 1

Views: 1503

Answers (1)

Ruslanas Balčiūnas
Ruslanas Balčiūnas

Reputation: 7428

$(window).scroll(function() {
    documentHeight = $(document).height(); // put this line inside scroll
    // the rest of code
});

Upvotes: 1

Related Questions