Steggie Steggie - 1 month ago 15
CSS Question

Remove class when scrolling past x-px (from bottom)

I have the following jQuery script which adds a class to an element when it scrolls past a point on the page.

jQuery(document).ready(function($) {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 380) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});


And this is the HTML part.

<div id="sticker">
<div class="widget">
<?php dynamic_sidebar( 'widget-area-2' ); ?>
</div>
<h3>Uw voordelen</h3>
<ul class="ClassName">
<li><strong style="vertical-align:top; margin-bottom:0px">Something A</strong>
<div class="submenu">Some text A</div>
</li>
<li><strong style="vertical-align:top; margin-bottom:0px">Something B</strong>
<div class="submenu">Some text B</div>
</li>
<li><strong style="vertical-align:top; margin-bottom:0px">Something C</strong>
<div class="submenu">Some text C</div>
</li>
</ul>
</div>


Now what happens is that the div
#sticker
is higher than the footer element, when the class
.stick
is added. This results in the content sliding over the footer element, which I do not want.

So the sollution I'm thinking of is to
removeClass
on the
stick
class when you have scrolled down an x of pixels on the page. So I tried the following code:

jQuery(document).ready(function($) {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 380) {
s.addClass("stick");
} if (windowpos >= pos.top + 900) {
s.removeClass("stick");
} else {
s.removeClass("stick");
}
});


But no go, then I found a simular question on this page, but that is not exacly what I'm looking for. But I added it into my code, like so:

jQuery(document).ready(function($) {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 380) {
s.addClass("stick");
} else if (windowpos >= pos.top + 900) {
s.removeClass("stick");
} else {
s.removeClass("stick");
}
});


Both codes do not do what I want them to do. Could anyone help me with the correct code or point me in the right direction? Thanks.

Answer

The If-conditions are in the wrong order. You should use:

jQuery(document).ready(function($) {
    var s = $("#sticker");
    var pos = s.position();
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top + 900) {
            s.removeClass("stick");
        } else if (windowpos >= pos.top + 380) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});

or even better:

jQuery(document).ready(function($) {
    var s = $("#sticker");
    var pos = s.position();
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top + 380 && windowpos < pos.top + 900) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});