클래스를 추가 한 후 헤더가 사라집니다.

Question

페이지를 스크롤 할 때 내 머리글에 하위 클래스를 추가하고 제거 할 수있는 작은 스크립트가 있습니다.

그러나 전환이 어렵고 헤더 변형이 사라질 수 있습니다.

퇴색하는 방법을 알아낼 수 없습니다. 안쪽이나 바깥쪽으로 깜박이거나 깜박 거리면서 사라집니다. 누군가 나를 도울 수 있는지 궁금 해서요.

내가 가진 jQuery 코드는 아래와 같습니다 (이 생겼에서 상태)

function init() { 
window.addEventListener('scroll', function(e){ 
    var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
     shrinkOn = 100, 
     header = document.querySelector("#header"); 
    if (distanceY > shrinkOn) { 
     $("header").addClass("smaller").fadeIn(400); 
    } else { 
     if ($("header").hasClass("smaller")) { 
      $("header").fadeOut(400).removeClass("smaller").fadeIn(400); 
    } 
    } 
}); 
} 
window.onload = init(); 

나는 헤더가 페이드 아웃, 추가] .smaller 클래스는, 다시 페이드합니다.

그리고 바이스 -versa.

제 질문에 도움이 되었기를 바랍니다.

Answer 1

나는 그것을 알아낼 수 있었지만, 이것은 나중에 게시 될 새로운 질문을 낳았다. 여기에 내 soloution입니다 :

$(document).ready(function() { 
    /* 
     navOffset - The distance in which to trigger the events 
     scrollPos - The position Y that the page has been scrolled 
    */ 

    var navOffset = 5 /*$("header").offset().top;*/ 

    $(window).scroll(function(){ 
    var scrollPos = $(window).scrollTop(); 
    $("header").stop(true); 

     if (!$("header").hasClass("smaller") || scrollPos < navOffset) { 
      if (scrollPos > navOffset) { 
       $("header").fadeTo(400, 0, function() { 
        $("header").addClass("smaller"); 
       }); 
       $("header").fadeTo(400, 1); 
      } else { 
       $("header").fadeTo(400, 0, function(){ 
        $("header").removeClass("smaller"); 
       }); 
       $("header").fadeTo(400, 1); 
      } 
     } 
    }); 
}); 

Answer 2

추가 정도 페이드 기능의 완료에 제거하는 경우 :

$("header").addClass("smaller").fadeIn(400); 

가된다 :

$("header").fadeIn(400, function(){ 
    $(this).addClass("smaller"); 
}); 

대안는 애니메이션이 첨부 된 클래스에 대한 CSS에서 변환 사용할 수