Geek asks and answers

Problems with a fixed div at the bottom of the page that stops at a given location

We needed a footer panel, which is located at the bottom of the page, and adheres to some area when the page scrolls below this area.

We achieved this using the following script:

fixed div at the bottom of the page that stops at a given location

But on some page, there is a problem when the footer toolbar just disappears from the page, and then appears again when the page scrolls further.

We found that this problem only occurs on a few pages when a page has content, such as Images, Video or Ajax, loads other content where the content is filled (or a space is filled) after the page loads.

I do not know how to fix this.

Here is a link from a live site with a problem page.

http://www.sandiegopchelp.com/services/cellphone-repair/htc/

http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/

http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one /

It is usually more noticeable in blog posts with many comments. Perhaps due to the loading of Disqus comments after the page has fully loaded.

+3
source share
7 answers

What does it look like?

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

, divs 1 . , - , , , , , ( /ajax ..).

, . , . Chrome, .

+2

, $(window).height(). . , , Ajax-, $(window).height(), - HTML CSS ( , Chrome. , ). height html height .

+1

, -, ... HTML, , .

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

, Position Fixed Relative.

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

script script ...

0

div position: relative, , . stickyOffset , , , , JSFiddle, (Iframe).

$(document).ready , , , .

, .

0

http://www.sandiegopchelp.com/services/cellphone-repair/htc/, , , , " ", . "", , " ", ( "" ").

, , , , ( , , ?).

0

div div, , , , div .

0

Finally, it was fixed by two methods, setting the explicit height wherever possible, using CSS and delaying the jQuery function after loading all the images. Note: Delay of some jQuery function until all images are fully loaded

0
source

More articles:


All Articles