How do I add a class to the body using jQuery, scrollTop, and toggleClass

Question

I have a question concerning jQuery's scrollTop functionality, and it's ability to toggle a class based on the amount of vertical scroll.

What I am trying to accomplish is on any page with a "section.banner" class, that after you scroll past the banner a class is applied to the body tag. This will allow me to change the fill colors of several SVGs that are in the site's header, as well as a fixed positioned side nav that is for pagination.

I am terrible at javascript, and have been stuck searching and trying to get this for hours. any help will be greatly appreciated. Here's the code that I'm working with now (CodeKit is telling me it is wrong, which I am not surprised). The value of 200 is just a placeholder and will be calculated by the height of a fluid image. Full disclosure, I have no idea if the brackets and parenthesis are correct.

    // Header/Fixed Pagination Banner Scroll Recoloriing (toggle class)
    // Check If '.banner' Exists
    if( $('section.banner').length > 0) {

        $('body').scrollTop(function)() 
        {
            if $(window).scrollTop >= 200 {
                $('body').toggleClass('downtown');
                return false;
            }
        }
    }

http://jshint.com/ Learn to validate your code. – epascarello Dec 15 '14 at 18:23 — epascarello, Dec 15 '14 at 18:23

Mathieu Labrie Parent · Accepted Answer · 2014-12-17T14:34:36.743

0

Try something like this :

if( $('section.banner').length > 0) {

    $(window).scroll(function() {
    {

        if ($(window).scrollTop() >= $('section.banner').scrollTop()) {
            $('body').toggleClass('downtown');
            return false;
        }
    });
}

UPDATE

There was little mistake in my code : http://jsfiddle.net/t2yp15hq/

var top = $('section.banner').position().top;

if($('section.banner').length > 0) {

    $(window).scroll(function() {

        if ($(this).scrollTop() >= top) {
            $('body').addClass('downtown');

        }
        else
        {
            $('body').removeClass('downtown');
        }
    });
}

It does not work with toogleClass, the background is flashing.

UPDATE

http://codepen.io/anon/pen/wBWzXy

The solution is to recalculate the top when the window is resized :

$(window).resize(function(){
  top = $('section.story-intro').offset().top - 90;
});

edited Dec 17 '14 at 14:34

answered Dec 15 '14 at 18:14

Mathieu Labrie Parent

2,598
1
9
10

I tried that out and it's still not working. Does it matter that there is a unique ID and class on the body tag already? Would that be a case for addClass then removeClass? I'll throw together a codepen tonight and post it to see if we can figure this out. Thanks for the help! – andandandandrew Dec 15 '14 at 22:12
That fiddle is definitely doing the add/remove class on scroll like it's supposed to, but I still cannot get it to work. I threw together a pen that is identical to my markup and scss and applied your script to it and it doesn't seem to be working. I think looking at this will give you a better idea of what I'm trying to accomplish—after you scroll the height of the top image, the logo and side pagination nav need to have their svg fill colors changed, which was the thought process of adding a class to the body so that I can target the SVGs in the page header, and the side nav with a mixin. – andandandandrew Dec 17 '14 at 12:37
http://codepen.io/anon/pen/YPWGKP . The top of $(".header") was equal to 0. I fix it. – Mathieu Labrie Parent Dec 17 '14 at 12:54
If you check out the full page view of the pen and inspect, you can see the script is throwing an error on line 371. it reads: "400 Uncaught SecurityError: Blocked a frame with origin "http://s.codepen.io" from accessing a frame with origin "http://codepen.io". Protocols, domains and ports must match." – andandandandrew Dec 17 '14 at 12:55
how do you active the full page view ? – Mathieu Labrie Parent Dec 17 '14 at 13:12
I think you have to fork it, then where it says editor you'll be able to click then get a full view option. By the way, you are killing it! Thanks. I have one more question to add to this little piece of magic, how would I bind this function to resize so that when the RWD page is resized it recalculates the distance from top to adding the class for color change? – andandandandrew Dec 17 '14 at 14:22
I can't see the security error that you have but i remake a codepen to add the resizing. Answer updated. – Mathieu Labrie Parent Dec 17 '14 at 14:33

How do I add a class to the body using jQuery, scrollTop, and toggleClass

1 Answers1