Question

I have a div that changes class depending on where the user is on the page using jquery. This function looks like this..

$(function(){

    var menu = $('#menu'),
        pos = menu.offset();

        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('slow', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('slow');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('slow', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('slow');
                });
            }
        });

});

But I also want to change the div class when clicking on a link/button with a special class/name.

I made a bad try .. But how could I incorporate this in the previous function? with a “if else” ..

$(".closemeny").click(function() {
    menu.fadeOut('slow', function(){
        $('#menu').removeClass('fixed').addClass('default').fadeIn('slow');
});

Answer 1

I don’t totally understand but I’ll take a crack:

Just keep the .click function separate or move it into your if/else {}’s.

$(function(){       
    var menu = $('#menu'),
        pos = menu.offset();

    $(window).scroll(function(){
        if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
            menu.fadeOut('slow', function(){
                $(this).removeClass('default').addClass('fixed').fadeIn('slow');
            });

            //you can paste it here

        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.fadeOut('slow', function(){
                $(this).removeClass('fixed').addClass('default').fadeIn('slow');
            });

            //or you can paste it here
        }
    });

    //or you can leave it here to apply to all cases
    $(".closemeny").click(function() {
        menu.fadeOut('slow', function(){
            $('#menu').removeClass('fixed').addClass('default').fadeIn('slow');
        });
    });
});