Simple menubar effect

Asked Dec 13 '16 at 16:39

Active Dec 13 '16 at 16:45

Viewed 51 times

How can I make this more smooth?

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 80) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

I would like an effect, where .menu gets filled with a color starting from the top.

I tried with css3 styling.

.fixed {
   position: fixed;
   background-color: #fff;
   width: 100%;
   transition: all .5s ease-in;
   box-shadow: 0px 2px 10px 0px #424242;
}

edited Dec 13 '16 at 16:45

Jed Fox

2,979
5
28
38

asked Dec 13 '16 at 16:39

Homme

1

What is not `smooth` about it? – bassxzero Dec 13 '16 at 16:42
like only comming from the top, like its slidering in the color – Homme Dec 13 '16 at 17:10
1

like this http://stackoverflow.com/questions/20659605/change-background-from-bottom-to-top-on-hover – bassxzero Dec 13 '16 at 17:17
Yes, but how do i modify this, so that the background of my container .menu gets filled with color, comming in from the top? – Homme Dec 13 '16 at 18:50
http://jsfiddle.net/fg4r4erg/ – bassxzero Dec 13 '16 at 18:56
https://jsfiddle.net/uctcf405/ – Homme Dec 13 '16 at 19:01
https://jsfiddle.net/emw6y114/ – bassxzero Dec 13 '16 at 19:23

Simple menubar effect

0 Answers0