シリウスサイトのノンスクロール位置では、見られないグローバルナビが
定位置に進むと現れてくる、というスタイルは、ブログ　HTML5　CSS３で
たまに見る程度で多く使われているか？どうかは知りませんが、

 

エントリーページならば、指定したページだけでもレイアウトを変えて
使えるのでブログ要素を含めた場合になら使えるかもしれません

 

あまり無下にお勧めするカスタマイズでもないんですが、サポートへの
ご質問がございましたので備忘録程度に参照ください

 

当ページのグローバルナビを確認ください

 

当ページでもエントリーのスタイルの割り込みで当ページだけの

 

個別指定で取り付けはいたしておりますが、当サイトのグローバルナビは
シリウスデフォルトを使用しておらず、その他構築物

 

サイト閲覧時は見られないものの

 

スクロールすると出現は致します...が

 

サイトを上に戻し対置で、なぜか消えない...がエラー

 

でも、通常のシリウスグローバルナビは、スクロール位置を上に
戻した時点で消えます

 

 

スクロールで現れる位置は、通常のグローバルナビの固定位置で
そのままトップ位置に置かれ、その他はすべてスクロールに合わせて
流れてまいります

 

 

では、手順へ進みますが、今回のカスタマイズはお隣リページの
通常設定の基本解説からの延長解説となります

 

当ページに直接お越しいただいた方は、以下をご確認の上進めてください
グローバルナビスクロールでトップ固定からリターンするjquery設定

 

では、お隣ページをご確認いただいたとして始めます

 

シリウスデフォルトテンプレート対応です

 

jqueryの導入、HTMLテンプレートでの記載はお隣と同じです

 

 

異なるのはスタイルシートへの記述のみ

 

 

スタイルシート原本
/* グローバルメニュー */

 

#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 900px;
position: absolute;
<% topMenuPlace(0) %>
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;

 

}

 

 

改行記述コード
シリウスで用意されているデフォルトヘッダー画像の位置で
数値は合わせています

 

/* グローバルメニュー */

 

#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 900px;
position: absolute;
<% topMenuPlace(0) %>
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;

 

　　top:-50px; /...ノンスクロール地点では隠れている
　　left: 300; /...横位置がずれていたら数値変更
　　width: 900px; /...サイトの幅に合わせる
}

 

 

こちらをすぐ下に追記してください

 

.fixed {
position: fixed;
top:50px;　　　　 /現れた際、ページのトップに現れる指定値
width: 100%;
z-index: 10000;
}

 

 

通常ページでの設定はこれで完了です

---

 

ここまではシリウスのデフォルトページレイアウトに合わせた説明ですが

 

エントリーページは、上級者設定で個別にスタイルを変えられます

 

何かしらの事情でエントリーページだけブログ要素を入れこみ
ヘッダー画像の縦幅を小さくしてみる...とかにする場合の

 

割り込み窓に記載する記述の備忘録

 

 

#header {
height: 0px;　ヘッダーを非表示は０　　縮小は数値指定する
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;

 

width: auto;
border-bottom:solid 1px #EBEBEB;
}

 

 

#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 900px;
position: absolute;
<% topMenuPlace(0) %>
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;

 

 

top:-50px;
left: 300;
width: 900px;

 

}

 

 

.fixed {
position: fixed;
top:50px;
width: 100%;
z-index: 10000;

 

}

 

ここまで

 

 

異なる表示手段が発見できましたら追記いたします

 

ページトップ
数値指定で表示されるグローバルナビの出現指定方法
グローバルナビ　jquery採用のカスタマイズまとめ
シリウスカスタマイズTOP