CODEWITHSUNDEEP
javascriptjquerycss
Mikedefieslife
Mikedefieslife

Reputation: 522

How to get CSS in Javascript working correctly

I'm having some trouble with some javascript I'm using.

The idea is make the background of my menu transparent, with white links. Then when scrolling say 100, for the background to change from transparent to solid white, the text links to change from white to #222, and the hover state on text links to change them back to white. 

//Fade in header
jQuery(window).on("scroll", function () {
 if (jQuery(this).scrollTop() > 100) {
    jQuery("body.home header, body.page header").css("background-color","#fff");
        jQuery("body.home header, body.page header").css("box-shadow","0px 2px 4px -2px rgba(0, 0, 0, 0.15)");
        jQuery("body.home header, body.page header").css("transition","1s");
            jQuery(".nav-menu ul li a").css("color","#222");
            jQuery(".nav-menu ul li a:hover").css("color","#fff");
 }

else {
    jQuery("body.home header, body.page header").css("background-color","transparent");
    jQuery("body.home .nav-menu ul li a, body.page .nav-menu ul li a").css("color","#fff");

            jQuery("body.home header, body.page header").css("box-shadow","none");


 }
 });

It's not working as expected.

Firstly, the white background can be seen until some form of scroll event happens. Then it changes to transparent, then solid again after 100.

The second problem, is that in the altered state with the solid white background, the anchor text is not changing colour on hover.

The effect can be seen not working on my blog which it's easier to link to as oppose to trying to describe.

Upvotes: 0

Views: 66

Answers (2)

Marco Scabbiolo
Marco Scabbiolo

Reputation: 7469

As @GavinThomas said, you should really use a CSS class to set the "transparent" state, and only use jQuery to toggle the class on/off.

That said, let's suppose the class white makes the background white, and by default the header is transparent, this is how your CSS should look like. Of course you'll need to add all the styles you already have.

header {
  background-color: transparent;
  transition: 1s;
}

.nav-menu ul li a, body.page .nav-menu ul li a {
  color: #fff;
}

header.white {
  background-color: #fff;
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.15); 
}

header.white .nav-menu ul li a{
  color: #222;
}

header.white .nav-menu ul li a:hover {
  color: #fff;
}

And as @GavinThomas said

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $("header").addClass("white");
    } else {
       $("header").removeClass("white");
    }

});

Upvotes: 1

Gavin Thomas
Gavin Thomas

Reputation: 1206

This is a hell of a lot of code for not much work! Just add a class on scroll, it would be much easier.

E.g. 

$(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 100) {
            $("header").addClass("white");
        } else {
            $("header").removeClass("white");
        }

    });

.white {
background:#fff;
}
.white a {
color:#222;
}

Upvotes: 3

Related Questions