Trying to do a CSS Transition on a class change

css

Solution

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);

Problem

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.

Original source