使工具栏保持在 CSS 的顶部答案

【问题标题】：Making a toolbar stay at the top in CSS使工具栏保持在 CSS 的顶部
【发布时间】：2012-07-24 09:12:52
【问题描述】：

在我的真实网站中，我有实际内容，但这个例子就足够了。 LOGO实际上是一个标志图像。工具栏也是一个图像。我使用以下代码通过简单地使用底部：0 而不是顶部：35px 将工具栏保持在底部。我基本上希望工具栏贴在页面顶部，并且只会被徽标向下推。当用户向下滚动时，工具栏应停留在页面顶部。所有内容都应该在工具栏下流动，因此 z-index 很高。我有它的方式工具栏一直骑在 35 像素。我知道原因，但我不知道如何完成我想要做的事情。

            <html>
                    <head>
                    <style type="text/css">
                    #logo {
                            width:100%;
                            height:34px;
                    }

                    #toolbar {
                            position: fixed;
                            top: 35px;
                            z-index:1000;
                    }
                    </style>
                    </head>
                    <body>
                            <div id="logo">LOGO</div>
                            <div id="toolbar">TOOLBAR</div>
                            <div id="content">
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                                    <p>lorem ipsum doler</p><br />
                            </div>
                    </body>
            </html>

【问题讨论】：

您将需要 javascript 来做到这一点。 CSS 不知道页面滚动了多远。

标签： html css web-applications user-interface toolbar

【解决方案1】：

如果没有一些 Javascript，就无法做到这一点。对于这种类型的功能，我会推荐 Bootstrap's Scrollspy。您实际上可以在他们的网站上看到它的使用情况。

【讨论】：