jQuery Animate SlideDown and then FIXED

Question

The following code causes the top left menu block to scroll into view when the user scrolls past the bottom of its child menu.

The problem I am having is changing the menu to FIXED once it scrolls into view. Currently, it continues to animate into view with each scroll.

Fiddle Here: http://jsfiddle.net/GregsFiddle/rUsRz/

JS Below:

jQuery( document ).ready( function( jQuery ) { 

if ($("#autofixmenu")[0]){

var $autofixmenu   = $("#autofixmenu"),
        $bottom    = $('#categories'),
        $window    = $(document),
        offsetbtm  = $bottom.offset(),
        offset     = $autofixmenu.offset(),
        topPadding = 70;

    $window.scroll(function() {
        if ($window.scrollTop() > $autofixmenu.height() ) {
            $autofixmenu.stop().addClass('autofixed').animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $autofixmenu.stop().removeClass('autofixed').animate({
                marginTop: 0
            });
        }

    });
}
});     

Answer 1

Here is the modified Javascript.

jQuery(document).ready(function(jQuery) { 
    if ($("#autofixmenu")[0]){
        var $autofixmenu   = $("#autofixmenu"),
                $bottom    = $('#categories'),
                $window    = $(document),
                offsetbtm  = $bottom.offset(),
                offset     = $autofixmenu.offset(),
                topPadding = 70;

        $window.scroll(function() {
            if ($window.scrollTop() > $autofixmenu.height() ) {
                if($autofixmenu.hasClass('autofixed') === false) {
                    $autofixmenu.addClass('absolute');
                    $autofixmenu.stop().animate({
                        marginTop: $window.scrollTop() - offset.top + topPadding
                    }, function() {
                        $autofixmenu.removeClass('absolute').addClass('autofixed').css('margin-top', '');
                    });
                }
            } else {
                $autofixmenu.stop().removeClass('autofixed').animate({
                    marginTop: 0
                });
            }
        });
    }
});     

You also need the following css changes

.autofixed {
    position: fixed;
    left: auto;
    top: 70px;
}

.absolute {
    position: absolute;
    top: auto;
    left: auto;
}

Answer 2

As I am understading your problem...you want to fix the div once it get on fixed prosition.

if is it than you have to change the .animate to .css

See below code.

jQuery( document ).ready( function( jQuery ) { 

if ($("#autofixmenu")[0]){

var $autofixmenu   = $("#autofixmenu"),
        $bottom    = $('#categories'),
        $window    = $(document),
        offsetbtm  = $bottom.offset(),
        offset     = $autofixmenu.offset(),
        topPadding = 70;

    $window.scroll(function() {
        if ($window.scrollTop() > $autofixmenu.height() ) {
            $autofixmenu.stop().addClass('autofixed').css({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $autofixmenu.stop().removeClass('autofixed').css({
                marginTop: 0
            });
        }

    });
}
});