Trying to do a CSS Transition on a class change

Question

Was wondering if there was a way to do a css transition when div is given a certain class. My best example is this site http://ideaware.co/

When you scroll down and the header becomes fixed, it does a background color change and has opacity. Really nice looking.

I am working on a template I have here http://www.niviholdings.com/collide/ and what I want to do is when the < nav > becomes fixed, I want the < ul > to slide over to the right.

Hopefully I am explaining this correctly.

question from:https://stackoverflow.com/questions/16176648/trying-to-do-a-css-transition-on-a-class-change

Answer 1

2 points i found that may help:

Transitions from auto to a fixed value might be a problem. Eventually you could try setting the margin-left of the .main-nav-ul to a fixed value per default, not only when it's sticky.

The second is (and this is hacky). Try to apply the class for your .main-nav-ul delayed:

setTimeout(function() {
    $('.main-nav-ul').addClass('nav-slide'); // line 57 in jquery.sticky.js
}, 100);