How to add css transitions to js scroll in header?

Question

I have a header that appears when the page scrolls down. I am trying to add css transitions to make it fade in and out because I've read that using javascript for fading is not as efficient.

.header-wrapper {
    top:0;
    left:0;
    right:0;
    position: fixed;
    display:none;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
}
.header-wrapper.active {
     display:block;   
}
.header {
    background-color:#000;
    height:80px;
}

Here is the js fiddle

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

    // if above 300 and doesn't have active class yet
    if (y > 300 && !$('.header-wrapper').hasClass('active')) {
        $('.header-wrapper').addClass('active');

    // if below 300 has still has active class
    } else if(y <= 300 && $('.header-wrapper').hasClass('active')) {
        $('.header-wrapper').removeClass('active');
    }
    });

http://stackoverflow.com/questions/3331353/transitions-on-the-display-property — mutil, Sep 09 '14 at 17:48
You can transition numeric properties, in your case: `opacity`. — Jonathan, Sep 09 '14 at 17:52

score 1 · Answer 1 · answered Sep 09 '14 at 17:52

Transitions are added with the css3 property transition.

One common reason for confusion: you can only transition properties that accept numeric values. Thus, you can't transition between display: block and display: none.

However you can transition between opacity: 0 and opacity: 1 with:

transition: 0.5s opacity

That would look something like this:

.bottomMenu {
    ...
    opacity: 0;
    transition: 0.5s opacity;
    ...
}
.bottomMenu.active {
     opacity: 1;   
}

For your particular case, I might recommend transitioning the height between 0 and 60px.

For that you can use:

transition: 0.5s height

So:

.bottomMenu {
    ...
    height: 0;
    transition: 0.5s height;
    ...
}
.bottomMenu.active {
     height: 80px;   
}

This seems like it would work for making the header appear and disappear with a fade, however I'm already achieving that with my javascript. See edit. I am just wanting to keep it how it is and ease it in and out... — user2684452, Sep 12 '14 at 17:19
As it says in my comment above, you can't transition from "Display: block" to "Display: none" you have to use "Opacity: 0" to "Opacity: 1" — FreePender, Sep 12 '14 at 18:30

Moob · Answer 2 · 2014-09-12T17:39:59.977

To animate the opacity the element must be visible. So remove the display:none and make it fully transparent (opacity:0). You can then use CSS transitions to animate the opacity when the classname changes:

.bottomMenu {
    ...
    display:block;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.bottomMenu.active {
     opacity:1   
}

http://jsfiddle.net/oL9ro4gL/6/

Furthermore, you're not restricted to just animating the opacity:

.bottomMenu {
    ...
   transition: all .25s ease-in-out;
}
.bottomMenu.active {
    opacity:1;
    height: 60px;
    background-color: blue;
    transform:rotate(180deg);
    color:white;
    font-size:40px;
    etc...
}

http://jsfiddle.net/oL9ro4gL/8/

score -1 · Answer 3 · edited May 23 '17 at 12:05

-1

Unfortunately, you can't animate the display property. See this question and its suggestions for workarounds.

edited May 23 '17 at 12:05

Community

1
1

answered Sep 09 '14 at 17:48

seancdavis

2,739
2
26
36

How to add css transitions to js scroll in header?

3 Answers3