Jquery navbar 애니메이션이 제대로 작동하지 않습니다.

Question

이 웹 사이트에서 비슷한 질문을했는데 찾을 수 없습니다.

저는 bootstrap3으로 약간의 웹 사이트에서 작업하고 있으며 대부분의 서식 지정/디자인 부분이 완료되었지만 해결할 수없는 한 가지 문제가 있습니다. 사용자가 특정 지점으로 스크롤 할 때 navbar가 축소되고 배경색이 변경되도록 Jquery를 추가했습니다. (감사합니다. 덕분에 나를 도왔습니다.) 일종의 작품이지만 그 움직임은 정말 이상합니다. 페이지를로드 할 때 navbar가 이미 축소되어 있고 배경에 색상이 지정되어 있지만 스크롤하면 크기가 작아지고 배경이 사라지고 Jquery를 작동하도록 설정 한 지점까지 스크롤하면 navbar가 축소됩니다 뒤로 및 배경색이 다시 변경됩니다. 서면으로 설명하기가 어렵 기 때문에 웹 사이트를보고 내가 무슨 말을하고 있는지보십시오. 다음은 내가 작업하고있는 웹 사이트입니다.

테스트 웹 사이트

내가 있으리라 믿고있어 그 JQuery와로드 될 때 작업 때문에 CSS를 숨길 수 (짧은 네비게이션 바의 높이와 배경색을)되어 설정을 처음에 숨겨져되지 않습니다. 사전에 도움을

$(document).ready(function(){ 
$(window).scroll(function() { 
    if ($(window).scrollTop() > 70) { 
     $("#top-bar").addClass('animated-header'); 
    } else { 
     $("#top-bar").removeClass('animated-header');  } 
}); 

$("#clients-logo").owlCarousel({ 

    itemsCustom : false, 
    pagination : false, 
    items : 5, 
    autoplay: true, 
    }) 

}); 

감사 :

아래는 jQuery 코드입니다!

Answer 1

멋진 웹 사이트!

헤더 요소를 살펴보면 문제가있는 곳의 animated-header 클래스를 이미 입력했음을 알 수 있습니다. 여기에 코드입니다 :

<header id="top-bar" class="navbar-fixed-top animated-header"> 

당신이 단순히 클래스를 제거하면됩니다 수 있으며, 스크립트가 위의 scrollTop 값이 클래스 기반을 추가/제거를 처리하는 데 도움이됩니다. 이 같은 것이 도움이 될 것입니다 :

<header id="top-bar" class="navbar-fixed-top"> <!-- without animated-header --> 

Answer 2

우리는 스크롤 위치를 다시 0으로 설정하고 있으므로 정상적으로 작동합니다. 이 파일을 추가 하시려면

$(document).ready(function() { 
    $('html,body').animate({ 
    scrollTop : 0 
    },10); 
}); 
$(document).ready(function() { 
$(window).scroll(function(){ 
     if($(window).scrollTop() >= 70){ 
      $("#top-bar").addClass("animated-header"); 
     } 
     if($(window).scrollTop() <= 70){ 
     $("#top-bar").removeClass("animated-header"); 
     } 
    }); 
});