CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Kenmore
Kenmore

Reputation: 1595

How can I enable CSS Transitions when switching between a fixed-top navbar and a fixed-bottom (w/ Bootstrap)

Okay, so I'm using Twitter Bootstrap and I have a "navbar navbar-fixed-top"; however, on some pages I want the navbar to be at the bottom. As a test, I've used jQuery to toggle the classes on click, like so: 

function toggleMainNav() {
    $("#main-nav")
        .toggleClass("navbar-fixed-top")
        .toggleClass("navbar-fixed-bottom");
}

Which works fine, but of course, it's instant.

I would like it to transition between the two. However, I am not very experienced with CSS transitions and after a couple hours of Googling and reading and watching... I still can't get it to work.

Here's a CSS snippet

#main-nav {
    -webkit-transition: all 0.5s;
}

And if I do a test like this (to make sure I used the correct transition property)

#main-nav:hover {
    background-color: #55dd66;
}

It works fine.

(more info for those who don't use Bootstrap: navbar-fixed-top makes top:0 and bottom:auto and navbar-fixed-bottom does the opposite)

Thanks in advance.

Upvotes: 0

Views: 1178

Answers (1)

koningdavid
koningdavid

Reputation: 8085

With CSS it is not possible to create a transition from top to bottom if you don't know the excact height of your viewport. It is only possible to animate between 2 values.

For example, you can transition between:

top:0;
top:300px;

But it's not possible to transition between:

top:0;
bottom:0;

I made this fiddle for you as example.

http://jsfiddle.net/ceFHx/

I think animating your object with jquery is the solution you are looking for. That way u can get the window height and set your fixed navbar to the correct offset needed.

Little update:

It is possible with css, but only the calc() function, and that's not really well supported

http://jsfiddle.net/ceFHx/1/

Upvotes: 2

Related Questions