CODEWITHSUNDEEP
javascriptjqueryhtmlcss
KHAN
KHAN

Reputation: 21

How to fix flicker effect when trying to scroll

I have 2 elements which are set to position fixed, if they reach the bottom of the page the position element is then set back to static using javascript.

I have an issue when i try to scroll by clicking the scrollbar and dragging it. If you scroll all the way to the bottom normally, then if you try to click the scrollbar and drag it up. It flickers and stops me from scrolling.

Here is the JSFiddle

HTML

<header>This is the header</header>
<main>
    <div id="content"></div>
    <section id="fixed-elements">
        <div id="fix1">Fixed Footer2</div>
        <div id="fix2">Fixed Footer1</div>
    </section>
</main>
<footer>This is the footer</footer>

Javascript

$(document).ready(function () {

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $('#fixed-elements').css({
            'position': 'static',
                'bottom': 'auto',
        });
    } else {

       $('#fixed-elements').css({
            'position': 'fixed',
                'bottom': '0',
        });            
    }
});

});

CSS

footer, header {
    background-color:green;
}
#content {
    height:1000px;
}
#fixed-elements {
    position:fixed;
    bottom:0;
    overflow:hidden;

}

What's happening here? And how can i fix it? ( I think something similar happens when trying to scroll using middle mouse click ).

Upvotes: 1

Views: 4979

Answers (2)

Josh Beam
Josh Beam

Reputation: 19772

Check out this jsfiddle. It accomplishes what you want without the flickering.

Basically, once you scroll to the top of the footer, it sets the position of the #fixed-elements to absolute, relative to the bottom of main, which has position: relative.

jQuery:

$(document).ready(function () {
    var totalHeight = $(document).height() - $(window).height(),
        footerHeight = $('footer').outerHeight();

    $(window).scroll(function () {
        console.log($(window).scrollTop(), (totalHeight - footerHeight));
        if ($(window).scrollTop() > (totalHeight - footerHeight)) {
            $('#fixed-elements').css({
                'position': 'absolute',
                 'bottom': 0
            });
        } else {

           $('#fixed-elements').css({
                'position': 'fixed',
                'bottom': 0
            });            
        }
    });

});

CSS (only one line was added):

/* you might consider removing padding and margin from the body,
   because it'll make it a little smoother
body {
    margin: 0;
    padding: 0;
} */

main {
    position: relative; // added this to main
}

footer, header {
    background-color:green;
}

#content {
    height:1000px;
}

#fixed-elements {
    position:fixed;
    bottom:0;
}

Upvotes: 0

Aleksei Rytikov
Aleksei Rytikov

Reputation: 558

Can be done without static, but with the recalculated value bottom:

'bottom': $('footer').outerHeight(true) + (($('body').outerHeight(true) - $('body').outerHeight())/2),

http://jsfiddle.net/rbz16Lpp/

Upvotes: 1

Related Questions