Div От Относительно фиксированного

Question

Я пытаюсь создать плавающее меню с помощью CSS. Когда я прокручиваю вниз изображение заголовка, я хочу, чтобы div придерживался вершины. Я попытался использовать «положение: исправлено», но это оставляет пробел. Есть ли в любом случае, чтобы преобразовать оболочку меню div из относительно фиксированной на лету?

CSS

/*** Header ***/ 
#header   { width: 100%; background-color: #000; z-index: 2000; height: 50px; margin: 0 0; border-top: 1px solid #464646; border-bottom: 1px solid #464646; position: fixed} 
#topheader  {height: 110px; background: #333; width:970px; margin: 0 auto; position: relative;} 
#topheadleft {float: left; width: 50%; font-family: font1; font-size: 46px; margin-top: 15px; } 
#topheadright {float: left; width: 50%} 
.callus { color: #fff; font-size: 20px; font-family: font4; text-shadow: 2px 2px #000} 
.hardwork {color: #fff; font-family: font3; font-size: 12px; text-transform:capitalize; } 
#topheadwrap { background: #333; padding: 0 0; margin: 0 auto; } 
.fixed { position:fixed; top:0; } 

HTML

<div id="topheadwrap"> 
     <div id="topheader"> 
       <div id="topheadleft"> 
         <span style="color:#FF4B45; text-shadow: 2px 2px #000;">East Coast</span><span style="color: #3A8CFF; text-shadow: 2px 2px #000;"> Martial Arts</span><br /> 
         <div style="margin-top:-30px; clear: both"><span class="callus">Call Us Now: 845-440-7715</span></div> 
         <div style="margin-top:-35px; clear: both"><span class="hardwork">Hard work, dedication, challenging, authentic</span></div> 
       </div> 
      <div id="topheadright"></div> 
     </div> 
    </div> 


    <div id="header"> 

     <div id='cssmenu'> 
<ul> 
    <li><a href='#'><span>Home</span></a></li> 
    <li class='has-sub'><a href='?page_id=39#box3'><span>About Us</span></a> 
     <ul> 
     <li class='has-sub'><a href='#'><span>The School</span></a> 
     </li> 
     <li class='has-sub'><a href='http://www.eastcoastma.com/?page_id=158'><span>Instructors</span></a> 
     </li> 

     </ul> 
    </li> 
    <li><a href='?page_id=56'><span>Classes</span></a></li> 
    <li><a href='?page_id=15'><span>Schedule</span></a></li> 
    <li><a href='#'><span>News</span></a></li> 
    <li><a href='?page_id=69'><span>Programs</span></a></li> 
    <li class='last'><a href='page_id=29 '><span>Contact</span></a></li> 
</ul> 
</div> 

Answer 1

Я считаю, что вы ищете съемной навигации.

http://code.stephenmorley.org/javascript/detachable-navigation/