Исправлен заголовок не зафиксирован в верхней части страницы

Question

Код ниже отлично работает в Opera, но не в FF и Chrome. Раздел заголовка начинается с пикселя (линии) 100px вместо 0px, который является верхней частью страницы. Что мне не хватает, чтобы сделать его совместимым с браузером?

Примечание: Заголовок всегда прикреплен к верхней части и либо расширяется до 100px по высоте, либо сжимается до 50px в высоту на основе действия прокрутки, которое отлично работает.

По какой-то причине ошибка jfiddle не удалась. Я не могу его создать.

Благодаря

JS

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       var showing_default = true; 
       var did_scroll = false; 

       $(window).on("scroll", function (e) 
       { 
        did_scroll = true; 
       }); 

       window.setInterval(function() 
       { 
        if (did_scroll) 
        { 
         did_scroll = false; 

         if (showing_default && $(document).scrollTop() >= 100) 
         { 
          showing_default = false; 
          $("#header_container").css('position', 'fixed'); 
          $("#default").stop().hide(); 
          $("#sticky").fadeIn(500); 
         } 
         else if (! showing_default && $(document).scrollTop() < 100) 
         { 
          showing_default = true; 
          $("#sticky").stop().hide(); 
          $("#default").fadeIn(500); 
          $("#header_container").css('position', 'fixed'); 
         } 
        } 
       }, 250); 
      }); 
     </script> 

CSS

  /* --- COMMON ---------------------------------------------- */ 
      * 
      { 
       margin: 0px; 
       padding: 0px; 
      } 
      /* --- HEADER ---------------------------------------------- */ 
      #header_container 
      { 
       display: block; 
       z-index: 100; 
       position: fixed; 
       width: 100%; 
       background: #EEEEEE; 
      } 
      #default 
      { 
       display: block; 
       margin: auto; 
       width: 900px; 
       height: 100px; 
      } 
      #sticky 
      { 
       display: none; 
       margin: auto; 
       width: 900px; 
       height: 50px; 
      } 
      /* --- CAROUSEL -------------------------------------------- */ 
      #carousel_container 
      { 
       display: block; 
       margin-top: 100px; 
       width: 100%; 
       background: #FFFFFF; 
      } 
      #carousel 
      { 
       display: block; 
       margin: auto; 
       width: 900px; 
      } 
      .image 
      { 
       display: none; 
       width: 900px; 
       height: 400px; 
      } 
      .first 
      { 
       display: block; 
      } 
      /* --- BODY ------------------------------------------------ */ 
      #body_container 
      { 
       display: block; 
       background: #BABABA; 
      } 
      #body 
      { 
       display: block; 
       margin: auto; 
       width: 900px; 
      } 
      /* --- FOOTER ---------------------------------------------- */ 
      #footer_container 
      { 
       display: block; 
       background: #DBDBDB; 
      } 
      #footer 
      { 
       display: block; 
       margin: auto; 
       width: 900px; 
      } 

HTML

 <div id="header_container"> 
      <div id="default">DEFAULT HEADER</div> 
      <div id="sticky">STICKY HEADER</div> 
     </div> 

     <div id="carousel_container"> 
      <div id="carousel"> 
       <div class="image first"><img src="images/1.jpg" width="900px" height="400px" alt="" /></div> 
       <div class="image"><img src="images/2.jpg" width="900px" height="400px" alt="" /></div> 
       <div class="image"><img src="images/3.jpg" width="900px" height="400px" alt="" /></div> 
       <div class="image"><img src="images/4.jpg" width="900px" height="400px" alt="" /></div> 
      </div> 
     </div> 

     <div id="body_container"> 
      <div id="body"> 
       TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM 
      </div> 
     </div> 

     <div id="footer_container"> 
      <div id="footer">FOOTER</div> 
     </div> 

    </body> 
</html> 

Answer 1

Как это, пожалуйста, добавьте top:0; ниже в селекторе:

#header_container { 
    display: block; 
    z-index: 100; 
    position: fixed; 
    width: 100%; 
    background: #EEEEEE; 
    top: 0; 
}