CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Unknown User
Unknown User

Reputation: 3668

Transitioning Affixed Navigation bar - CSS

I've a got a fixed navigation bar using the affix() of Twitter Bootstrap 3.

Everything is working fine with the navigation bar. I wanted to add a transition in the appearance of the navigation bar.

When the user scrolls the page the navigation bar is being displayed instantly. I'd like to animate it.

Tried with -webkit-transition: all 1s ease-in but the result was for the width of the navigation bar.

Here's the FIDDLE.

Please help me in animating it when the user scrolls down.

Upvotes: 7

Views: 13536

Answers (2)

user5936810
user5936810

Reputation: 121

I could not get this to work until I implicitly added position:static to .navigation.

Upvotes: 1

Mark Simpson
Mark Simpson

Reputation: 2374

To transition something, you move it from one state to another. So what you are trying to do is change one or more of the properties of the .navigation element.

What properties do you have available to change?

You can't change the height, width, or opacity, as those need to remain the same before and after the transition. If you want the transition to involve movement, then your best bet is to transition the position of the element. Let's do this with the "top" property.

After the transition, your navigation needs to have 0 as its top value. The height of the element is 250px, so let's make it start with top: -250. However, if we do this, the menu will initially be hidden. To fix that, we need to make it ignore the top value by removing the relative positioning.

.navigation {
    background: #fff;
    /* position: relative; */
    width: 100%;
    top: -250px;
}

Then we can transition it to 0:

#nav.affix {
    position: fixed;
    top: 0;
    z-index: 1030;
    width: 100%;
    -webkit-transition: all 2s ease-in;
    transition: all 1s ease-in;
}

RESULT:
http://jsfiddle.net/ShL4T/8/

Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Upvotes: 14

Related Questions