スクロールで上に隠れたナビが再度出現するＷスライド表示

Sirius.customize

TOP

今回の解説は、親ページで導入をご案内するスタンダートレベルＣＳＳプルダウンメニュー
に,、次の動きを加えたものです。

ページをスクロールオンすれば、通常ナビは上に移動しますので隠れますね..
ですが、そのまま少し下へスクロースすると再度ナビが出現する..

再度現れたナビは、そのままスクロールを続けても画面上の上に張り付いたまま...
上にスクロールすれば...元の位置...

いいまわしが、面倒なのですが、当ページをスクロールして確認してください。

失礼..申しわけございません

当ページのGナビは、記載時以降、仕様を加えているので、動きは同じなんですけれど
再度、ナビが出現する際カラーが異なっていますね..

ですので、当ページの説明では、同色の再出現となります。

異なるカラーの2段構造にする際は、当ページの手順におお隣ページの仕様を加えてください。
こちら...
Gナビ、再出現時、カラー切り替え2重構造指定方法

シリウスのデフォルトナビゲーションでも取り付けは可能かと理解しますが、
現在、未検証です
後ほど、書き足しますのでしばらくお待ちください

作動は、ご確認いただけたと判断し、お話は進めます

指定は、ＨＴＭＬ、スタイルシートへＣＳＳを追加するだけで完了
ですので、jqueryは使いませんが、javascript形式の記述は使います

ＨＴＭＬテンプレートを開きましょう

<head>～</head>内に以下の記述を張り付けます

</script>
ここまで

次
<body>に置くプルダウンコードを上から下まで、nav記述で囲みます

<div class="nav">
プルダウンコード
</div>

位置が不明な場合、トップページのソースを見てください

次、スタイルシートを開いてください

わかりやすい箇所に以下の記述を張り付けてください

.nav {
padding: 0 px;
margin: 0 auto0px;
width: auto;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}

で、終わりです

カスタマイズは、後々書き足しますが、急ぐ場合は自己努力でお願いします