고정 위치에 대한 상대적 위치 - 아래로 내려 오는 방법은 무엇입니까?

Question

나는 내 메뉴가 모두 갖추어져있어 좋았으며, 현재 JS에는 좋은 곳곳에 페이지가 점프되어 있지 않습니다. 내가 겪고있는 문제는 아무 곳에 나 나타나지 않고 위아래로 슬라이드하는 "고정 된"내비게이션을 얻는 것입니다.

현재 jQuery는 약 300px ~에서 클래스를 활성화하여 메뉴 위치를 상대 위치에서 고정 위치로 변경합니다.

참고 : 원래 고정 위치 지정을 사용하여이 작업을 수행 할 수 있었지만 Z- 색인 및 내 사이트의 다른 요소가 힘들어서 고정 위치가 아닌 상대 위치를 유지하려고합니다. . 나 또한 javascript로 어떤 식 으로든 메뉴를 복제하고 싶지는 않습니다.

jquery 또는 css를 사용하여 메뉴 위치가 고정으로 변경되면 어떻게 슬라이드 다운 및 슬라이드 업 효과를 얻을 수 있습니까?

내 코드는 다음과 같습니다.

HTML :

<div class="nt-main-navigation-sticky"> 
    <!-- my nav, logo, etc, is in here. --> 
</div> 

CSS :

.nt-main-navigation-sticky { 
    position: relative; 
} 


.activeScroll .nt-main-navigation-sticky { 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

JQUERY :

// get my header height 
var getHeaderHeight = $('.nt-main-navigation-sticky').outerHeight(); 


// add/remove body class 
$(window).scroll(function() { 

    if($(window).scrollTop() > getHeaderHeight + 200) { 

     $('body').addClass('activeScroll').css('padding-top', getHeaderHeight); 

    } else { 

     $('body').removeClass('activeScroll').css('padding-top', 0); 

    } 

}); 

Answer 1

당신의 CSS에 전환 추가 :

.nt-main-navigation-sticky { 
    position: relative; 
} 


.activeScroll .nt-main-navigation-sticky { 
    position: fixed; 
    top: -50px; // or whatever the height of the navbar 
    left: 0; 
    transition: top 600ms; 
} 

,

및 js :

if($(window).scrollTop() > getHeaderHeight + 200) { 

    $('body').addClass('activeScroll').css('padding-top', getHeaderHeight); 
    $('.nt-main-navigation-sticky').css('top', '0px'); // will trigger transition 

} else { 
    $('.nt-main-navigation-sticky').css('top', '-50px'); // will trigger transition 
    $('body').removeClass('activeScroll').css('padding-top', 0); 

}