Change menu css when scrolling

Question

So when I scroll down below 100px I want the menu to become transparent but when you scroll back to the top it goes back to solid color.

Example of my menu:

<div id="menu" class="transparent">
    <menu tags etc>
</div>

CSS

#menu {
background-color: black
}
.transparent {
opacity: 0.5
transition: all 0.5s
}

How can I do this using JavaScript? Not sure if I got this wrong already because my menu is already transparent due to the class transparent.

SilviaDeGM · Accepted Answer · 2015-12-07 11:39:21Z

1

You need to write something like this:

$(document).scroll(function() {

  var scrollTop = $(window).scrollTop();
        if (scrollTop >= 200 ) {
            $('#menu').addClass("transparent");
        }
        else{
            $('#menu').removeClass("transparent");
        }
});

https://jsfiddle.net/jho5nnxj/

answered Dec 7, 2015 at 11:39

SilviaDeGM

917 bronze badges

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

2 Comments

Anonymous Over a year ago

I think my CSS or HTML might be wrong. Because it's just like how i wrote it up but my header is already transparent.

SilviaDeGM Over a year ago

Remove the transparent class from the div just like this: <div id="menu" >

vistajess · Accepted Answer · 2015-12-07 11:15:52Z

0

You can use scrollTop();

$(window).scroll(function() {

    var scroll = $('body').scrollTop();

      if (scroll >= 100) {
            $('.navbar').css('background', 'rgb(27, 17, 3)');
            anchor.css('color', '#fff');
        } else {
            // $('.navbar').css('background','rgba(246, 222, 166, 0.29)');
            $('.navbar').css('background', 'transparent');
            anchor.css('color', '#721001');

        }

});

answered Dec 7, 2015 at 11:15

vistajess

6791 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

Change menu css when scrolling

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related