2014-03-13 5 views
-1

페이지를 아래로 스크롤 할 때 떠 다니는 플로팅 메뉴를 만들려고합니다.
DEMO
height: 70을 추가 했으므로 메뉴 높이를 높이고 싶습니다. 이제 상단으로 스크롤 할 때 메뉴가 동일하게 돌아 가기를 원하므로 height: nav.height()을 추가했습니다.
코드가 작동하지 않습니다. 위로 스크롤하면 메뉴가 기본 높이 값으로 돌아 가지 않습니다.높이가 변경되지 않은 이유는 무엇입니까?

미리 감사드립니다.

+0

보십시오 : 아무것도 새로운 가치와 사이에 변경되지 이전 값. – sp00m

+0

코드에 버그가있는 것 같습니다. – Paolo

+0

링크를 잘못 업데이트했습니다. – rolory

답변

0

사용자가 맨 위로 스크롤 할 때 높이를 50으로 설정하기 만하면됩니다. 스크롤을 시작하면 nav.height()이 70으로 설정되며 사용자가 다시 위로 스크롤 할 때이 값을 사용합니다.

당신은`A = A` 문의 종류 즉, nav.height``에`nav.height`을 설정하는

$(function() { 

    var nav = $('.navgroups'); 
    var navHomeY = nav.offset().top; 
    var isFixed = false; 
    var $w = $(window); 
    $w.scroll(function() { 
     var scrollTop = $w.scrollTop(); 
     var shouldBeFixed = scrollTop > navHomeY; 
     if (shouldBeFixed && !isFixed) { 
      nav.css({ 
       position: 'fixed', 
       top: 0, 
       left: nav.offset().left, 
       width: nav.width(), 
       height: 70 
      }); 
      isFixed = true; 
     } else if (!shouldBeFixed && isFixed) { 
      nav.css({ 
       height: 50,//<---------HERE 
       position: 'static' 
      }); 
      isFixed = false; 
     } 
    }); 
}); 

DEMO

관련 문제