change css class based on scroll position

Question

I have the following HTML

<header class="fixed">...</header>
<div id="content">
    <div id="sidemenu" class="fixed">...</div>
    <div id="scroll">...</div>
</div>
<footer class="fixed">...</footer>

With various positioning rules in the CSS and the rule

.fixed {
    position: fixed;
}

This achieves the desired affect of only the div with id scroll moves. However, this can leaves the footer out of view.

What I want to do, is once the bottom of the scroll div reaches the bottom of the footer, change position: fixed to position: absolute and then everything will scroll up together revealing the footer.

But I don't know how to do it. I was looking at waypoints but I'm in a little over my head.

volkh4n · Accepted Answer · 2013-09-19 12:37:11Z

1

something like this should solve the problem of yours. try this:

$(window).scroll(function () {
    var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

    if (scrollBottom <= $("footer").height()) {
        $("footer").css("position", "absolute");
        } 
        else {
            $("footer").css("position", "fixed");
        }
});

answered Sep 19, 2013 at 12:37

volkh4n

4024 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

halkujabra · Accepted Answer · 2013-09-19 11:51:57Z

0

For that, you will have 'onScroll' event. And check when the coordinates of the scroll div matches that of the footer. As soon as they match, change the position to 'absolute' in the implementation of handler.

answered Sep 19, 2013 at 11:51

halkujabra

2,9524 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

change css class based on scroll position

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related