내 탐색 막대가 중복되는 이유는 무엇입니까?

Question

내 웹 사이트는 다른 섹션 div로 가득 찬 1 페이지입니다. 나는 홈 페이지에서 1 nav을 가지고 있고 스크롤을 한 후에 다른 고정 nav가 사라진다.

때로는 navs의 중복이있다. 따라서 고정 된 항법 장치는 일반 항법 장치 내에 있습니다. 정상적인 nav가 다시 나타나기 전에 고정 된 nav가 사라져야했기 때문에 이것은 이상합니다.

누구든지 이에 대한 통찰력을 갖고 있습니까? Google 크롬을 사용하여 코드를 표시합니다. 크롬 문제일까요?

$(document).on('scroll', function() {  

    if($(this).scrollTop() > $('.nav').outerHeight()){ 
     $('.nav').hide(); 
     $('.nav_fixed').fadeIn("slow"); 
    } 

    else if($(this).scrollTop() == $('.nav').position().top) { 
     $('.nav_fixed').hide(); 
     $('.nav').fadeIn(700); 
    } 

    else { 

    } 
}); 

Answer 1

는 "정상적인 탐색이 등장하기 전에 고정 탐색이 사라진해야하기 때문에이 이상하다."

이것은 애니메이션이 비동기 적이라는 것과 관련 될 수 있습니다. hide() 명령어 다음에 fadeIn() 명령어를 사용했기 때문에 fadeIn()이 완료된 후에는 hide()이 완료됩니다. 사실 fadeIn()은 애니메이션의 비동기 특성 때문에 hide() 전에 발생합니다.

$(document).on('scroll', function() {  

    if($(this).scrollTop() > $('.nav').outerHeight()){ 

    // By encapsulating the instruction for fadeIn() inside of a 
    // function that is then passed as a completion callback to 
    // the hide() method, we ensure that fadeIn() doesn't happen 
    // until hide() is finished 
    $('.nav').hide(function(){ 
     $('.nav_fixed').fadeIn("slow"); 
    }); 
    } else if($(this).scrollTop() == $('.nav').position().top) { 

    // By encapsulating the instruction for fadeIn() inside of a 
    // function that is then passed as a completion callback to 
    // the hide() method, we ensure that fadeIn() doesn't happen 
    // until hide() is finished 
    $('.nav_fixed').hide(function(){ 
     $('.nav').fadeIn(700); 
    });  
    } else { 

    } 
});