TOP
Sirius.customize
Sirius.customize

グローバルナビスクロール時にトップ固定するjquery採用設定のご案内

シリウスのデフォルトグローバルナビ作動は、サイトスクロールに合わせて
上部移動しそのまま隠れてしまいますが、jqueryを採用することで
記事欄ははるか上に移動しようともPC画面のトップ位置で固定されつずけ
読者のメニューを探す手間が回避されます

 

スクロール地点を戻した場合は、元の位置にきちんと停車されます

 

さらに言えばレイアウト構造のデザインとしてもイメージ的に良い
サイトとしての印象を与えることができるでしょう

 

しかし、ナビのデフォルトデザイは、はっきり言って見慣れてくるとダサいので
カスタマイズすることも一考...

 

 

ＤＥＭＯスタイルの動きは当ページのグローバルナビをご確認ください

 

正確に申しますと
当サイトのグローバルナビはシリウスのデフォルトではなく、
サイドメニュー見出しをグローバルナビみたいに表示させているものです

 

 

シリウスに組み込むための解説に移りますが、今回の対応範囲は

 

デフォルトテンプレート

 

サイト幅９００ＰＸ

 

ヘッダー画像はデフォルトで用意されている画像か、同サイズの掲載で
あること....

 

以上の形態で進めますが、異なる、カスタマイズ以降のレイアウトの場合
指定値が変わりますので順応して解釈ください

 

上部解説は、パソコンでの閲覧対象で巻末にはスマートフォン対応の
レスポンシブ構造についての注意事がございますので最後までお読みください

 

 

ビジネステンプレートではさらに違いがあると思われますが、
しばしお待ちいただければ追記いたします

 

設定手順始めます

 

ステップ１...jqueryダウンロード

 

今回は、jQuery 2.1.3.min.jsを使います

 

以下リンクでダウンロードしてください
Download the compressed, production jQuery 2.1.3.min.js

 

ダウンロードが完了しましたら、シリウスのアップロード画面で
サイトを置くサーバーにファイルをアップロードします

 

 

 

ステップ２...ＨＴＭＬ記載

 

シリウスのＨＴＭＬテンプレートを開きます

 

作動反映はトップページからエントリーまででよいと思われるのですが、
リンク集まで願う方はすべてのＨＴＭＬ内に同作業を施します

 

<head>～</head>内に、jquery-2.1.3.min.jsと作動を読見入れる記載を
追加します

 

以下記述をそのまま貼り付けてください

 

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function() {
var nav = $('#globalNavi'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
});
</script>

 

 

ステップ３...ｉｄ要素でグローバルナビを指定...配置場所の変更

 

ＨＴＭＬテンプレートの巻末へ移動すると
<% topMenu %>

 

という記述がございますが、これがグローバルナビを読み込んでいます

 

この記述は、ここに位置でストと　jqueryが読み込めないで不作動と
なりますので上部に切り取って移動します

 

 

<!-- ★フッターここから★ -->
<div id="footlink"><% footerMenu %><% PRLink %><% sitemapPageLink %></div>
<% topMenu %>ここです
<div id="footer">Copyright (C) <% thisYear %> <a href="<% pageDepth %>"><% siteTitle %></a> All Rights Reserved.<% accessAnalyzer %></div>
<!-- ★フッターここまで★ -->

 

<% searchTag | str_replace(<!-- ★comment★ -->,サイト内検索:) | tag_insert(div id="searchbox") %>

 

</div>
</body>
</html>

 

 

移動する前に　id要素で読み込みの対象にするため囲みます

 

コピーしてお使いください
<div id="globalNavi"><% topMenu %></div>

 

ｉｄは任意ですが、書き換えた場合　head内　スタイルシートでも
同名称に書き換えることになります

 

 

移動先

 

<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header"<% pageHeaderImage %>>
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★ヘッダーここまで★ -->
<div id="globalNavi"><% topMenu %></div>...ここにおいてください

 

<!-- ★メインコンテンツここから★ -->
<div id="contents"<% pageColumns %>>
<div id="threebox"<% pageColumns %>>
<div id="main"<% pageColumns %>>
<% pageNavigation %>
<% freeSpace1 %>

 

 

ｈｔｍｌ記載はここで終了

 

 

 

 

ステップ４.スタイルシート追加

 

以下へ到達します

 

デフォルト原本..ここがグローバルナビの位置決めその他を指示している
項目です

 

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

 

#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:200px;
left: 300;
　 width: 900px;

 

 

追加後記述

 

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

 

#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:200px;
　　left: 300;
　 　width: 900px;
}

 

すぐ下に、以下記述を追加します

 

 

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

 

 

で、終了

 

 

 

 

詳細...シリウス専用の追加行です

 

あとがきで、申し訳ありませんが
#topmenuの追加記述について

 

以下３行は、追記しなくとも反映は確認されます
その後のサイトカスタマイズ次第では、エラー対策のため必要になるかもしれない
と理解願います
top:200px;
left: 300;
width: 900px;

 

 

記述の解釈

 

top:200px; サイトトップからグローバルナビまでの距離
left: 300; 左寄せ位置
width: 900px; サイト幅に合わせて書き換える

 

 

以下の記述だけでも追加すれば反映は確認されます

 

.fixed {
position: fixed;　ここは動かんとする固定指示
top:-200px;　　　上部にスクロールして止まる位置
width: 100%;
z-index: 10000;　　５０００でもよい
}

 

 

ここまでで、パソコンでは作動の確認されるはずです....が

 

スマートフォン閲覧では障害ともなります

 

以下参照

 

レスポンシブデザイン対応サイトについて

 

スマートフォン対応のレスポンシブデザイン構造をサイトに組み込んでいる際の
ご注意事です

 

スマートフォンの画面でもグローバルナビが停車してしまうと、小さな画面を
さらに小さくしてしまうのですね

 

 

パソコンやＩＰＡＤならサイトのおしゃれでよいのかもしれませんが、
小さな範囲でははっきり言って邪魔者以外の何物でもありません

 

うっとうしいだけ！

 

そんな場合は、スマートフォンではナビを出現させないという手法を
用います

 

指定手順はこちらでご確認ください
スマートフォンでは、固定のグローバルは出現させない

 

 

さらなるカスタマイズは、以下関連メニューで参照ください

 

 

スポンサーリンク

 

 

 

ページトップ
グローバルナビスクロールでトップ固定からリターンするjquery設定
グローバルナビ　jquery採用のカスタマイズまとめ
シリウスカスタマイズＴＯＰ

グローバルナビスクロールでトップ固定からリターンするjquery設定関連解説
数値指定で表示されるグローバルナビの出現指定方法
SIRIUS　シリウスサイトで最初はないはずのグローバルナビが一定値スクロールすると出現する、戻せばまた消えるカスタマイズ。縦幅の狭いサイトに使えそうです