固定页眉不固定在页面顶部。

Question

下面的代码在Opera中工作得很好，但是在FF和Chrome中就不行了。标题部分从像素(行)100 0px开始，而不是从页面顶部的0px开始。为了使它与浏览器兼容，我错过了什么？

注意:标题总是固定在顶部，或者在高度上扩展到100 as，或者根据滚动操作缩小到50 as，这也很好。

是因为小提琴失败的原因。我不能创造它。

谢谢

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;
            }

        <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;
}