jQuery and css issue

Question

I try to create a parallax scroll with fullPage JS

GitHub url: https://github.com/alvarotrigo/fullPage.js

So this fullPage.js is exactly what I need for my website but the problem is that when the visitor scrolls, the header background need to be changed like so:

<header>
<div class="logo"><a href="index.html"><img src="img/logo-positive.png" alt="" /></a></div>
</header>

when scroll=0

header {
background:red;
}

when scroll >= 1

header-negative {
background:blue;
}

I made it working with jquery using

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 1) {
        $("header").addClass("header-negative");
    } else {
        $("header").removeClass("header-negative")
        ;}
});

But now, using this fullPage.js script, I don't know why but the script is making my scroll bar disappear so I guess the browser doesn't know if the visitor is scrolling or not and the header isn't changing.

The website is here: http://bit.ly/1C1PnN9

I appreciate your help, ty!

score 1 · Answer 1 · answered Feb 06 '15 at 20:30

Done guys, the problem was that i was need to display the scroll bar from fullPage.js with scrollBar: true :) I was right, if the browser isn's detecting the scroll bar the jquery will not add any class. Too bad, i don't like that scroll bar on full page scroll website but ....

jQuery and css issue

1 Answers1