jquery: кнопка переключения наложения и кнопка закрытия цвета

Question

Я создал навигацию с 2 страницами наложения. Первый для моего меню и второй для контактной формы.

Первой проблемой является переход между двумя цветами для слова «Меню». Когда посетитель находится в верхней части окна, и он нажал «Меню», все в порядке. Но когда посетитель прокручивает страницу вниз и снова нажимает на «Меню», цвет слова совпадает с цветом фона. Мне хотелось бы, чтобы посетитель нажимал на оверлей, если фон коричневый, цвет кнопки «Закрыть» становится белым и возвращается коричневым, только если класс меньше активен.

Вторая проблема заключается в переключении между двумя оверлеями. Мне бы хотелось, чтобы посетитель нажал «Контакт», он может закрыть оверлей, нажав «Закрыть» в правом углу. Проблема заключается в том, что ничего не произошло: -/

JSFIDDLE

$('#home-menu .toggle-menu').click(function(e) { 
     e.preventDefault(); 
     $('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu'); 

     $('#overlay-menu').toggle(); 

}); 

$('#home-menu .toggle-contact').click(function(e) { 
     e.preventDefault(); 
     $('h4.toggle-menu').html($('h4.toggle-menu').html().replace('Menu','Close')); 

     $('#overlay-contact').toggle(); 

}); 


$(window).on('scroll', function() { 
     var scrollTop = $(this).scrollTop(); 

     $('#home-content').each(function() { 
      var topDistance = $(this).offset().top; 

      if ((topDistance-155) < scrollTop) { 
       $('#home-menu').addClass('smaller'); 
      } else { 
       $('#home-menu').removeClass('smaller') 
      } 
     }); 

    }); 

Answer 1

Если я понимаю ваши вопросы правильно, я считаю, что я решил их с this JSFiddle.

Вот ваш обновленный код JavaScript.

$('#home-menu .toggle-menu').click(function(e) { 
     e.preventDefault(); 
     $('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu'); 

     if ($('#overlay-contact').is(':visible')) { 
      $('#overlay-contact').toggle(); 
      $('#toggle-menu').css("color", ""); 
     } else { 
      $('#overlay-menu').toggle(); 
      if ($('#overlay-menu').is(':visible')) { 
       $('.toggle-menu').css("color", "#FFFFFF"); 
      } else { 
       $('.toggle-menu').css("color", ""); 
      } 
     } 
}); 

$('#home-menu .toggle-contact').click(function(e) { 
     e.preventDefault(); 
     $('h4.toggle-menu').html($('h4.toggle-menu').html().replace('Menu','Close')); 

     $('#overlay-contact').toggle(); 
     if ($('#overlay-contact').is(':visible')) { 
      $('.toggle-menu').css("color", "#FFFFFF"); 
     } else { 
      $('.toggle-menu').css("color", ""); 
     } 
}); 


$(window).on('scroll', function() { 
     var scrollTop = $(this).scrollTop(); 

     $('#home-content').each(function() { 
      var topDistance = $(this).offset().top; 

      if ((topDistance-155) < scrollTop) { 
       $('#home-menu').addClass('smaller'); 
      } else { 
       $('#home-menu').removeClass('smaller') 
      } 
     }); 

    }); 

Я добавил код в обработчик #home-menu .toggle-menu Нажмите, чтобы закрыть контактную накладку, если он открыт. И я добавил код для обоих обработчиков, чтобы установить цвет меню/закрытия всегда белым, когда оверлей открыт, и будь то цвет, который CSS обычно делает, когда наложение не открыто. Это работает, потому что стиль, заданный в JavaScript, переопределяет любой другой стиль элемента. Но затем стирание стиля, выполняемого JavaScript, сбрасывает его на все, что обычно было бы.