부모 div에 고정 된 고정 내비게이션

Question

유동적 인 웹 사이트를 만들고 있습니다. 내 페이지 중 하나에 고정 된 사이드 바가 있습니다. 지금은 두 개의 링크 만 있으므로 제대로 작동합니다. 사이드 바는별로 크지 않습니다. 레이아웃은 다음과 같이 진행됩니다 사이드와

내용

헤더

바닥 글

사이드 바 때문에 헤더까지 아래로 상당히 배치되고, 너무 높이 얻는 경우에 그것은으로 오버플로 보행인. 바닥 글이되면 바닥 글

상대에 도달 할 때까지

1. 상대 스크롤 아래로
2. 고정 될 때까지 : 나는 특정 화면에 높이 즉

   에 도달하면 그것을 시작하고 '고정'되고 싶어요 에 도달

Answer 1

아, 난 그냥이 일을했다 : 순자산 가치 (NAV)의 스크롤 위치를 확인하기 위해 jQuery를 사용

소스보기 : http://trans.worldvision.com.au/ChildSponsorship/ChildSearch.aspx 어떻게 작동하는지 확인하십시오.

순수 CSS로이 작업을 수행 할 수 없다면, 불행히도 jQuery 나 다른 JavaScript/라이브러리가 필요합니다.

레이아웃에 대해 미안합니다 ... iPad에는 탭 키가 없습니다.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 

$(window).scroll(function() { 
               if ($(".csnavHome").position().top < $(window).scrollTop()) { 
                   $(".csnav").css("position", "fixed"); 

                   $(".csnav").css("z-index", "2"); 
               } else { 
                   $(".csnav").css("position", "relative"); 
                   $(".csnav").css("z-index", "0"); 
                   $(".csnav").css("top", "0"); 
               } 
           });