Fixed header is not fixed to top of the page

Question

Code below works fine in Opera but doesn't in FF and Chrome. Header section starts from pixel (line) 100px instead of 0px which is top of the page. What do I miss to make it cross browser compatible?

Note: Header is always fixed to top and either expands to 100px in height or shrinks to 50px in height based on scrolling action which works fine as well.

Some reason jfiddle fails. I cannot create it.

Thanks

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

Like this please add top:0; in below selector:

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