0

私の実際の Web サイトには実際のコンテンツがありますが、この例で十分です。LOGO は実際にはロゴ画像です。ツールバーもイメージです。次のコードを使用して、top:35px ではなく、bottom:0 を使用するだけで、ツールバーを下部に保持しました。私は基本的に、ツールバーをページの上部に固定し、ロゴによってのみ押し下げられるようにしたいと考えています。uesr が下にスクロールすると、ツールバーはページの上部に留まります。すべてのコンテンツはツールバーの下に流れる必要があるため、Z インデックスが高くなります。私が持っている方法では、ツールバーは 35px でずっと下に乗っています。理由はわかっていますが、自分がやろうとしていることを達成する方法がわかりません。

            <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 に答える