2012-03-09 2 views
1

У меня есть div, который меняет класс в зависимости от того, где пользователь находится на странице, используя jquery. Эта функция выглядит следующим образом ..изменить класс на 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 при нажатии на кнопку/ссылку с особым классом/именем.

Я сделал плохую попытку. Но как я мог включить это в предыдущую функцию? с «если еще» ..

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

ответ

3

Я не совсем понимаю, но я возьму трещины:

Просто держать функцию .click отдельный или переместить его в свой, если/иначе {} «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'); 
     }); 
    }); 
}); 
+0

Это работает очень хорошо! Но слои возвращаются, когда я снова прокручиваю. Есть ли способ отключить слой после того, как кто-то щелкнет «closemeny»? Не возвращаться, пока вы не перезагрузите страницу. – user681061

+0

Я просто добавил это, чтобы удалить div. $ (". closemenu"). click (function() { menu.fadeOut ('slow', function() { $ ('# menu'). remove(); – user681061

1

Что вы можете сделать, это просто создать удобную функцию, которую вы можете пройти, чтобы держать вещи сухими. Я не думаю, что вы выиграете от объединения этих событий; они разные, даже если они делают то же самое.

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'); 
}); 
+0

Я собирался предложить точное решение . Отлично сработано. – Jlange

Смежные вопросы