아래 이미지가 아래로 스크롤 한 후 상단 이미지가 아래로 스크롤 됨

Question

그래서 부트 스랩을 배웠고 정말 깔끔한 효과 중 하나가 spook-studio의 웹 사이트에있었습니다. [1] 상단 navbar 로고, 큰 로고 그것의 작은 버전으로 붕괴하고 그것과 함께 navbar가 나타난다.

나는 네비게이션 바를 만드는 법을 알고 있으며 네비게이션의 각 섹션을 아래로 스크롤 할 때 해당 페이지와 일치시키지 만, 스크롤 한 후에 네비게이션 바를 표시하려면 어떻게해야합니까?

어디서나 질문이나 의견을 보내 주셔서 감사합니다.

[1] http://www.spookstudio.com/

Answer 1

jsFiddle : http://jsfiddle.net/8My5v/ (부분 업데이트)

는 jQuery의 scroll() 및 scrollTop() 방법을 사용할 수 있음을 달성하기 위해.

지금이 당신이 그것을 할 수있는 방법은 다음과 같습니다

창 스크롤

,

창 스크롤 양을 감지 (즉 경우는 0 또는 그 이상). 창이 아래로 스크롤하면

-> 쇼 메뉴

창 맨 위로 스크롤 경우 - 데모 숨기기 메뉴에게>

코드 :

$(window).scroll(function() { 
    if ($(window).scrollTop() == 0) { 
     $('.menu').fadeOut(200); 
     $('.welcome').animate({ 
      height: "300px" 
     }, 300); 
     shown = false; 
    } else if ($(window).scrollTop() > 0 && !shown) { 
     $('.menu').fadeIn(200); 
     $('.welcome').animate({ 
      height: "150px" 
     }, 300); 
     shown = true; 
    } 
});