번역 된 애니메이션 끈적 헤더 번역본

Question

나는 내 사이트 헤더에 사용할 프로토 타입을 만들었습니다. 기본적으로 스크롤 할 때 스크롤이 고정 된 위치 (끈끈한 탐색)의 화면에 다시 나타납니다. 먼저 마크 업에 두 개의 태그가 있음에도 불구하고 실현되었지만 이상적으로는 하나만 사용하여이 목표를 달성하는 것이 좋습니다.

은 여기 내 codepen

천천히 아래로 스크롤하면 내가 여기 달성하기 위해 노력하고있어 볼 수 있습니다. Heres 내 자바 스크립트 :

$(window).scroll(function() { 

    if ($(this).scrollTop() > 60){ 
     $('.main-header').addClass("sticky-header"); 
    } 
    else{ 
     $('.main-header').removeClass("sticky-header"); 
    } 

    if ($(this).scrollTop() > 160){ 
     $('.main-header').addClass("sticky"); 
    } 
    else{ 
     $('.main-header').removeClass("sticky"); 
    } 
}); 

아마도 약간 다른 접근 방식을 사용하여 이것을 달성하는 더 좋은 방법이 있을까요? 나는 스크롤 위의 두 인스턴스를 테스트하고 있다는 사실을 좋아하지 않는다. 첫 번째로 헤더의 위치를 ​​적용 할 방법이 필요하고 아래로 이동하는 것처럼 snazzy 전환을 수행하는 여백 값을 적용해야하기 때문에 이렇게했다. 페이지의 상단.

Answer 1

하나 아래로 자바 스크립트를 교체 : 당신은 (() 함수 {

if ($(this).scrollTop() > 0){ 
    $('.main-header').addClass("sticky-header"); 
} 
else{ 
    $('.main-header').removeClass("sticky-header"); 
} 

if ($(this).scrollTop() > 160){ 
    $('.main-header').addClass("sticky"); 
} 
else{ 
    $('.main-header').removeClass("sticky"); 
} 

}) 좋은 스크롤에게

$ (창) .scroll를 얻을 것이다;