用jquery更改div的類

Question

我有一個div，它根據用戶在頁面上使用jQuery的位置來更改類。此功能看起來像這樣..

$(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'); 
       }); 
      } 
     }); 

}); 

但我也想改變div類，當點擊一個特殊的類/名稱的鏈接/按鈕。

我做了一個糟糕的嘗試..但我怎麼能將這個在以前的功能？用「的if else」 ..

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

Answer 1

我不完全理解，但我會帶一條縫：

只要保持。點擊功能分開或將其移動到您的if/else {}的。

$(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'); 
     }); 
    }); 
}); 

Answer 2

你可以做的只是創建一個方便的函數，你可以通過它來保持乾燥。我認爲你不會將這些事件結合起來;即使他們做同樣的事情，他們也是不同的。

var changeClass = function (c1, c2) { 
    menu.fadeOut('slow', function() { 
     $(this).removeClass(c1).addClass(c2).fadeIn('slow'); 
    }); 
}; 

$(window).scroll(function() { 
    if ($(this).scrollTop() > pos.top + menu.height()) { 
     changeClass('default', 'fixed'); 
    } else if ($(this).scrollTop() <= pos.top) { 
     changeClass('fixed', 'default'); 
    } 
}); 

$(".closemeny").click(function() { 
    changeClass('fixed', 'default'); 
});