Плавное появление меню jQuery

652

23 июня 2017, 06:37

Здраствуйте.
.header- это главная страница во весь экран. Менюшка появляется после полного скролла от главной страницы.

Нужно чтобы плавно появлялся .menu на jQuery.

JavaScript

  var menu = $('.menu');
  var limit = $('.header').height();
  function toggle(state){
    menu.toggleClass('hidden', state);
}
  $(window).on('scroll', function(){
    var top = $(window).scrollTop();
      if(top < limit){
        toggle(true);
      } else{
        toggle(false);
      }
  });

CSS

.menu{
    width:100%;
    height: 75px;
    background:#F8E9D6;
    position: fixed;
}
.menu.hidden{
    opacity: 0;
}

Код работает, но нужна плавность

Answer 1

нужно всего лишь в css добавить transition и opacity: 1

.menu{
    width:100%;
    height: 75px;
    background:#F8E9D6;
    position: fixed;
    opacity: 1;
    transition: opacity .4s;
}
.menu.hidden{
    opacity: 0;
}

Answer 2

$(window).on('scroll', function () {
    if($('elem').length > 0 && $(window).scrollTop()+$(window).height() >= $('elem').offset().top){                                                                   
        $('elem').fadeIn();                                    
}