0

在我的真实网站中，我有实际内容，但这个例子就足够了。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>
4

1 回答 1

1

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

于 2012-07-25T20:39:40.640 回答