スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/27-a55b20de

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

メニューの表示位置を固定 ページをスクロールした際に、サイドメニューの一部が常に表示されるように固定してみた

前回の記事で導入した「ページ内の目次」を、スクロールしても常に表示されるように「CSS」と「jQuery」で表示位置の固定をしてみた。
これで縦長のページでも常に「ページ内の目次」が表示されるので、ページの構成も分かり易く、目次のトップや各見出しの位置に簡単に移動が可能で結構便利
また、ちょこっとソースをいじれば横スクロールにも対応可能。

今回は下記のページを参考にさせて頂きました。(参考と言うかそのままコピペで完了...w)
CSS と jQuery を使用してメニューの表示位置を固定する / Lowaivill Tech Blog



メニューの表示位置を固定する方法


  1. 1.HTMLへの記述
  2. 2.CSSへの記述
  3. 3.JavaScriptの記述



1.HTMLへの記述


まず、HTMLで表示を固定したい箇所を「id="fixedbox"」が付いた要素で囲います。
このブログの場合、サイドメニューはFC2ブログのプラグイン1~3を利用しており、その内プラグイン3だけをスクロールしても表示位置が固定されるように以下のようにテンプレートのHTMLに記述しました。

<div id="fixedbox">
<!--permanent_area-->
<!--plugin_third-->
<div class="section"><!-- plug-in-section -->
<div class="sidetitle">
<h3 style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
</div>
<div class="side-space">
<div style="text-align:<%plugin_third_ialign>">
<!-- plug-in-align --><%plugin_third_description><!-- /plug-in-align -->
</div>
<%plugin_third_content>
<div style="text-align:<%plugin_third_ialign>">
<!-- plug-in-align --><%plugin_third_description2><!-- /plug-in-align -->
</div>
</div>
</div><!-- /plug-in-section -->
<!--/plugin_third-->
<!--/permanent_area-->
</div>

※1行目の「<div id="fixedbox">」と20行目の「</div>」をテンプレートのHTMLに追加して、プラグイン3を「id="fixedbox"」で囲ってます。

※2行目の「<!--permanent_area-->」と19行目の「<!--/permanent_area-->」はプラグイン3の内容が記事ページだけで表示されるようにしてます。(今回の場合、記事ページの目次を表示してる為)





2.CSSへの記述


次にCSSの記述を「テンプレートの設定」から、スタイルシート編集内に以下のように記述
※HTMLに続き、CSSもちょっとだけ書き足せばOK♪

.fixed{
position: fixed;
top: 0px;
left: 0px
z-index: 9999;
}





3.JavaScriptの記述


最後に、head要素内(<head> ~ </head>の間)に下記のJavaScriptを記述します。

<script>
$(function(){
    var box    = $('#fixedbox');
    var boxTop = box.offset().top;
    $(window).scroll(function () {
        if($(window).scrollTop() >= boxTop - 30) {
            box.addClass('fixed');
        } else {
            box.removeClass('fixed');
        }
    });
});
</script>

以上、これだけの手順でスクロールした時にサイドメニューの一部が常に表示されるように設定完了
各記述の詳しい説明や、横スクロールで表示を固定させたい場合は、下記のページをご確認下さい。
CSS と jQuery を使用してメニューの表示位置を固定する / Lowaivill Tech Blog
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-09-26 | JavaScript | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/27-a55b20de

「スクロールしてもメニューが常に表示される方法」へのトラックバック

- TrackBack -


「スクロールしてもメニューが常に表示される方法」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。