説明例
In this example site header is kept visible when a visitor scrolls the page.
どのように構築したか
This example demonstrates how to use events to freeze your header and change its appearance as users scroll through your site.
To create a sticky header, we will use two Classic Strip elements—one with a transparent background and the other with a white background. Customize the transparent Strip, adding header elements like your name, logo and a Menu. Once this Strip is designed, duplicate it and change its background color to white. Drag and drop each Strip and Attach to Header.
First, we made the white header hidden on load and added an anchor, which we'll use as a trigger point for the switch and add to it two event handlers—onViewportLeave and onViewportEnter—to change the header background as users scroll through the site.
You can put this either in your page code to make the change in one place, or in the site code to make it in all pages.
次のステップ
この例をエディターで開き、テンプレートを操作してください。
サイトを公開する。
どのように Veloでの例題の扱い方.
関連例
これは役に立ったか？
|
ご意見ありがとう！
エレメントの非表示と表示
ユーザーのインタラクションに応じて要素を隠したり表示したりする。
中級
Hide and Show an Image
Show and hide an image according to the clicked button.
初心者
崩壊要素
要素グループの折りたたみと展開。
初心者
サイト・コンテンツの変更
ユーザーのインタラクションに応じてサイトのコンテンツを変更する。
初心者