Question

My header is set to a width of 920px centered and using the code below the header becomes fixed and changes opacity when the user scrolls. I have acheived my desired effect pretty easily although when the change happens instant. I’m wondering if i can make the change fade into place? I’ve tried using CSS3 Transitions with no luck.

      <script>
  $(function() {

    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('header').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) { 


            $('header').css({ 'position': 'fixed', 'position': 'fixed', 'opacity':0.8,  'top':0, 'left':0 });

        } else {
            $('header').css({ 'position': 'relative' }); 
        }   

    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });

});
  </script>

Thanks.

Answer 1

You can place your styles into 2 separate classes and use jQuery UI’s switchClass()

switchClass( remove, add, [duration] )

Switches from the class defined in the first argument to the class
defined as second argument, using an optional transition.

Add some style classes:

style1{
    position: fixed;
    opacity: 0.8;
    top: 0;
    left: 0;
}

style2{
    position: relative;
}

Switch between them:

if (scroll_top > sticky_navigation_offset_top) {
    $('header').switchClass("style2", "style1", 300);
} else {
    $('header').switchClass("style1", "style2", 300);
}​

Alternatively you can look further into CSS3 transforms. I have not used them myself yet but they may be able to achieve what you need.