Geek Answers Handbook

Switching to an Added Navigation Bar - CSS

I have a fixed navigation bar using affix() Twitter Bootstrap 3.

Everything works fine with the navigation bar. I wanted to add transition when the navigation bar appears.

When the user scrolls the page, the navigation bar is displayed instantly. I would like to revive it.

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

Here is FIDDLE .

Please help me in the animation when the user scrolls down.

+7
javascript jquery css css3 twitter-bootstrap
source share
2 answers

To move something, you move it from one state to another. So you are trying to change one or more properties of a .navigation element.

What properties are available for change?

You cannot change the height, width or opacity, as they must remain the same before and after the transition. If you want the transition to be associated with movement, then the best option is to transition the position of the element. Let me do this with the "top" property.

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

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

Then we can go 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/

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

+14
source share

I couldn't get this to work until I indirectly added position:static to .navigation .

+1
source share

More articles:


All Articles