높이가 변하는 머리말이 붙어있는 스티키 사이드 바?

Question

나는 뭔가를 이루려고 노력하고 있으며 기존 jQuery 플러그인을 사용할 수 없다. 내가 이루고자하는 목표는 다음과 같습니다.

웹 사이트를 열 때 맨 위에 약 200px의 사이드 바를 가지고 있습니다. 그 위의 내 머리글이며, 머리글 아래에있는 메뉴 (메뉴 상단에 도달하면 끈적입니다).

아래에서 사이드 바 div (윗줄을 .sidebar라고 부름)가 위쪽에 도달하면 끈적 거리기를 원합니다 (메뉴 빼기, 항상 페이지 상단에 있어야 함).

<div class="header"></div> 
    <div class="menu">always sticky through a jQuery sticky plugin</div> 
    <div class="wrapper"> 
     <div class="sidebar">the part that SHOULD be sticky</div> 
     <div class="content">the content that SHOULD scroll</div> 
    </div> 

은 물론, .sidebar 및 .content가 서로 옆에 :

는 상황이 조금 명확하게하기 위해, 이것은 HTML의 간단한 예입니다.

나는 정말로 간단한 해결책을 잊어 버리고 있다고 생각하지만, 나는 그것을 이해할 수 없다.

Answer 1

나는 당신이 전에 말한 것을했다고 생각합니다. 이게 네가하려는거야?

http://dropthebit.com/demos/stickyfloat/stickyfloat.html

코드처럼 보이는에서 지금 : 나는 약간이를 수정했다 https://gist.github.com/chaupt/728487

하지만 스크롤 할 때까지 사이드 바는 고정 된 상태를 유지하고 창 상단은 상단의 감동 요소를 스크롤하십시오.

편집 :

좋아, 무슨 뜻인지 알 것 같아.

CSS :

#header {background-color:#0000ff; color:#fff; height:50px; text-align:center; width:100%; z-index:10; } 

    #wrapper {margin:0; padding:0; position:relative; z-index:1; } 

    #menu {background-color:#000000; clear:both; color:#fff; height:25px; padding:5px; position:relative; width:100%; z-index:10; } 

    #sidebar {background-color:#ff0000; color:#fff; float:left; margin:35px 0 0 0; position:relative; width:6em; } 

    #content {background-color:#ff00ff; color:#fff; margin:0 0 0 6em; padding:35px 0 0 .5em; } 

    p {margin:0 0 .5em 0; } 

HTML :

<div id="header">Header</div> 
<div id="wrapper"> 
    <div id="menu">Menu</div> 
    <div id="sidebar"> 
     <ul> 
      <li>Item1</li> 
      <li>Item2</li> 
      <li>Item3</li> 
     </ul> 
    </div> 
    <div id="content"> 
     <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
     <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</p> 
     </p> 
    </div> 
</div> 

그런 다음 위의 gisthub 위치에서 stickyFloat.js 파일을 추가하고, 추가 :이 시도

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#menu").stickyfloat({ duration: 400 }); 
     $("#sidebar").stickyfloat({ duration: 400 }); 
    }); 
</script> 

나는 생각한다 이것이 당신이 말하는 것입니다 : http://jsfiddle.net/qVwTY/2/

상단 메뉴가 창 상단에 붙어 있으며 사이드 바가 하단에 붙습니다. 필자가 가지고있는 모든 브라우저에서 테스트하지는 않았지만 최신 버전의 Firefox와 Chrome에서 작동합니다.

희망이 도움이됩니다.