Hello Everyone. I have the following jQuery, CSS and HTML that I have successfully implemented. What I need help with is the <a href="#" class="resultsleftcollogo">....</a>. What I need is to have it animate in when .fixed is added, and when .fixed is removed, have it animate out. This would make for a "smooth transition" with the navigation moving up or down when the <a href... is displayed or not displayed.

I appreciate any help someone could give me.

Thanks!



Code:
<script type="text/javascript">
    $(document).ready(function () {
        var top = $('div.contentcol_left').offset().top - parseFloat($('div.contentcol_left').css('marginTop').replace(/auto/, 0));
        $(window).scroll(function (event) {
            // what the y position of the scroll is
            var y = $(this).scrollTop();

            // whether that's below the form
            if (y >= top) {
                // if so, ad the fixed class
                $('div.contentcol_left').addClass('fixed');
            } else {
                // otherwise remove it
                $('div.contentcol_left').removeClass('fixed');
            }
        });
    });
</script>
Code:
    div.contentcol_left a.resultsleftcollogo {
        margin: 10px 0 10px 20px;
        display: none;
        width: 159px;
        }
        div.contentcol_left.fixed a.resultsleftcollogo {
            display: block;
            }
    .contentcol_left {
        float: left;
        width: 155px;
        }
        .contentcol_left.fixed {
            position: fixed !important;
            top: 0 !important;
            }
Code:
<div class="contentcol_left" style="position: relative;">
    <a class="resultsleftcollogo" href="#">
        <img src="../images/logo_sidebar.png">
    </a>
    <ul class="sidenavigation">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
    <div class="clear"></div>
</div>