Issues With Fixed Div On Bottom Of Page That Stops At Given Place

We needed a footer toolbar that stays at the bottom of the page, and sticks to some area when page is scrolled below that area. We did achieved this using following script: fixed d

Solution 1:

How does this look?

http://jsfiddle.net/LukeGT/NxSc3/

$(window).scroll(function() {

    $('#bar').css('position', 'static');
    console.log($('#bar').position().top);
    console.log($(window).scrollTop() + $(window).height());

    if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
        $('#bar').css('position', 'fixed');
    }
});

setTimeout(function() {
    $('#extra').show();
}, 1000);​

I simulated the late loading of images by just showing a few extra divs after 1 second. I believe the problem arises from the fact that the height of the page changes after the code for the bar runs, so it's behaving as it should if the page were shorter (without the images/ajax etc).

What I do instead is position the bar in it's place at the bottom of the page each time the page is scrolled, calculate its height from the top there, and compare this with the scroll height. If we're too far up, it positions the bar in a fixed position at the base of the page, and otherwise leaves it alone. It works smoothly in Chrome, but I haven't tested elsewhere.

Solution 2:

I guess this is a problem with the $(window).height() function. Check here. For all the dynamic contents like Images, Video or Ajax-loaded content the height is not added to the result of $(window).height() unless it is specified somewhere in the HTML or CSS (and from the referred link I see this happens only in Chrome. You might want to confirm on this though). To those dynamic contents you can either try adding the height attribute in html or height attribute in the corresponding style.

Solution 3:

This is not the answer but i have found something while inspecting your website... This is you actual HTML when its working fine as you want..

<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: fixed; ">

but when it is not working, the Position attribute is changing from Fixed to Relative .

<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: relative; ">

you can check you script for that or post you script here...

Solution 4:

At initial state, your div is in position: relative so its offset is based on the container element, not on the total height of the page. The variable stickyOffset is set based on that relative offset, that is why it gets clip down sooner than expected while scrolling and also why it works in your JSFiddle as the container there is the page (Iframe) itself.

In your $(document).ready function, you'll need to add the offset of not only the footer but also the rest of the offset on top of the containing element so that the offset is based on the total page instead of the containing div.

Hope that helps.

Solution 5:

By looking at your example on http://www.sandiegopchelp.com/services/cellphone-repair/htc/ using chrome, I can see that your footer disappears when it gets at the "related links" section. At this moment, you set the position of the footer to "relative" so it will replace it in the regular flow of the document and its position is actually below the "related links" section which is why it disappears off screen (below "related links").

but you calculated the position at which it should become relative on page load only where you should have recalculated it after having added the "related links" section as it changes the page height (I understood that you added afterward, am I right?).