How to get CSS in Javascript working correctly

Question

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.

jQuery(".nav-menu ul li a:hover").css("color","#fff"); will not override the css style for hover in the stylesheet. — epascarello
– epascarello, Commented May 5, 2016 at 15:39

Gavin Thomas · Accepted Answer · 2016-05-05 15:40:13Z

3

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;
}

answered May 5, 2016 at 15:40

Gavin Thomas

1,2067 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marco Scabbiolo · Accepted Answer · 2016-05-05 15:53:46Z

1

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");
    }

});

answered May 5, 2016 at 15:53

Marco Scabbiolo

7,4793 gold badges40 silver badges49 bronze badges

3 Comments

Mikedefieslife Over a year ago

Excellent. Makes sense. Thanks. I've marked Gavin's as the answer. I had been struggling with this for some time.

Mikedefieslife Over a year ago

Just one problem. Wordpress load jQuery in compatibility mode, so I have to replace $ with jQuery all the time.

Marco Scabbiolo Over a year ago

That's a shame, try to use jQuery instead of $, you can always rely on the replace function on your text editor anyways

Collectives™ on Stack Overflow

How to get CSS in Javascript working correctly

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related