2017-07-16 1 views
-1

私はこれまでにこれをやったのを見たと思うが、どこを覚えていないのだろう。私が望むのは、テキストを画面の上部に固定することです(ナビゲーションバーのようにすることができますが、ナビゲーションバーの代わりにサイトのセクションの見出しテキストにしたい)次のセクションまでスクロールし、新しい見出しテキストが途中でバンプして、次のセクションまでロックされたままになります。複数のヘッダーテキストをウェブサイトの上部に修正することは可能ですか?

アップロードしたデザインを見て、 "motalife.photography"を写真セクションをスクロールしながら上にして、途中で突っ込んで "motalife.design"そのセクションをスクロールしながら上部に固定されます。出来ますか?

sample website design

答えて

1

あなたが「ポジション:スティッキー」:上に読むのが好きかもしれません https://developer.mozilla.org/en/docs/Web/CSS/position

粘着性の位置決めのための一般的な用途は、アルファベット順のリストの見出しのためです。 Bの見出しは、Aで始まる項目のすぐ下に表示され、オフスクリーンでスクロールされます。残りのコンテンツと一緒に画面外にスライドさせるのではなく、Bの見出しはすべてのB項目がオフスクリーンでスクロールされるまでビューポートの上部に固定されたままになります。その時点でC見出しなどで覆われます。

私が読んだことから、それはしばらく落とされましたが、最近復活しました。だから、すべての状況でうまくいかないかもしれないし、あなたが気づいておきたいさまざまな関連する問題があります。私はちょうど私の現在のプロジェクト( - webkit-stickyと-moz-stickyを含む)のdivでそれをテストしましたが、記述されているように動作していたようです(FFとMintのChromiumで)。

関連する問題