Need help modifying .scroll() to include .animate()

Need help modifying .scroll() to include .animate()

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!

  1. $(document).ready(function () {
  2.       var top = $('div.contentcol_left').offset().top - parseFloat($('div.contentcol_left').css('marginTop').replace(/auto/, 0));
  3.       $(window).scroll(function (event) {
  4.             // what the y position of the scroll is
  5.             var y = $(this).scrollTop();
  6.             // whether that's below the form
  7.             if (y >= top) {
  8.                   // if so, ad the fixed class
  9.                   $('div.contentcol_left').addClass('fixed');
  10.             } else {
  11.                   // otherwise remove it
  12.                   $('div.contentcol_left').removeClass('fixed');
  13.             }
  14.       });
  15. });


  1. div.contentcol_left a.resultsleftcollogo {
  2.       margin: 10px 0 10px 20px;
  3.       display: none;
  4.       width: 159px;
  5.       }
  6.       div.contentcol_left.fixed a.resultsleftcollogo { display: block; }
  7. .contentcol_left { float: left; width: 155px; }
  8.       .contentcol_left.fixed { position: fixed !important; top: 0 !important; }


  1. <div class="contentcol_left" style="position: relative;">
  2.       <a class="resultsleftcollogo" href="#">
  3.             <img src="../images/logo_sidebar.png">
  4.       </a>
  5.       <ul class="sidenavigation">
  6.             <li><a href="#">Link 1</a></li>
  7.             <li><a href="#">Link 2</a></li>
  8.             <li><a href="#">Link 3</a></li>
  9.             <li><a href="#">Link 4</a></li>
  10.             <li><a href="#">Link 5</a></li>
  11.       </ul>
  12.       <div class="clear"></div>
  13. </div>