• MENU●●●●
  • グローバルナビスクロールでトップ固定からリターンするjquery設定


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


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

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

     

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

     

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

     

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

     

     

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

     

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

     

     

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

     

    デフォルトテンプレート

     

    サイト幅900PX

     

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

     

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

     

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

     

     

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

     

    設定手順始めます

     

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

     

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

     

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

     

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

     

     


     

    ステップ2...HTML記載

     

    シリウスのHTMLテンプレートを開きます

     

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

     

    <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>

     


     

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

     

    HTMLテンプレートの巻末へ移動すると
    <% 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>

     

    idは任意ですが、書き換えた場合 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 %>

     

     

    html記載はここで終了

     

     


     

     

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

     

    以下へ到達します

     

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

     

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

     

    #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の追加記述について

     

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

     

     

    記述の解釈

     

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

     

     

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

     

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

     

     

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

     

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

     

    以下参照


     

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

     

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

     

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

     

     

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

     

    うっとうしいだけ!

     

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

     

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

     

     

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

     

     

    スポンサーリンク

     

     

     

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

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

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト