Why doesn't this work? add/remove class when scroll past element

JavaScript
1

I want the sticky div to get the class .not-sticky when I scroll to the footer. But now it adds the class as soon as i start scrolling.

2

Can you clarify what you are trying to do here exactly?

(It almost sounds like you are trying to make a sticky footer but you don’t need js for that?)

3

It is a sticky attached to the bottom, but when i scroll down, getting to the actual footer i want it to change class which makes it static instead of fixed, placing it just above the footer.

4

Do you mean something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}
div {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 80px;
    width: 100%;
    background: #eee;
}
.not-sticky {
    position: static;
}
section {
    height: 2000px;
    background:red;
}
footer {
    height: 100px;
    background: #000;
    color:#fff;
}
</style>
</head>

<body>
<section></section>
<div class="sticky">test</div>
<footer>footer</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> 

<script>
jQuery(function(){
    createSticky(jQuery(".sticky"));
});
function createSticky(sticky) {
    if (typeof sticky != "undefined") {

        var pos = ($('footer').offset().top) - sticky.offset().top;
            win = jQuery(window);

        win.on("scroll", function() {

            if( win.scrollTop() > pos ) {
                sticky.addClass("not-sticky");
            } else {
                sticky.removeClass("not-sticky");
            }           
        });         
    }
}
</script>
</body>
</html>
1 Like
5

yep. exactly like that. Thanks again.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.