LOGIN ID Password Auto Login Register Now! Lost Password?
XUGJ Forum

ヘッダー下部のメニューバーをスクロール時に画面上部に固定

  • このフォーラムに新しいトピックを立てることはできません
  • このフォーラムではゲスト投稿が禁止されています

投稿ツリー


前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 .2 | 投稿日時 2016/3/18 18:11 | 最終変更
kamezou  1st Class 居住地: 2013~  投稿数: 47
ヘッダー下部のメニューバーが、スクロールにより画面上部に達した時点でメニューバーを固定する。
自サイトにこの機能を付けたくて、検索してみました。大量にヒットしたのですが、若干問題がありました。

多くの場合、メニューバーの固定・解除時に、メニューバーの高さ分 表示がずれる という症状が出るのです。
また、firefox で、ブラウザの戻るボタンで戻ると、固定が解除されている という症状もありました。

この機能、そのほとんどが メニューバーの class に .fixed を追加、削除することで実現されていました。
なんだか、面倒なことをしているような気がしたので、別の方法を考えてみました。
メニューバーのコピーを画面上部に固定し、それを表示・非表示することで、固定・解除を表現するというものです。

アニメーション表示が簡単にでき、cssファイルの .fixed の記述も不要です。
3行目の class名 を変更するだけで動作します。id名(#~) でも動作しますが、ページ内に id が2つになるので、class に変更した方がよいと思います。
function dsp_nav()内の .show()を .fadeIn()や.slideDown()に変更し、.hide()の前に .stop()を追加すると、アニメーション表示になります。

theme.html の jQuery の読込より後に記述してください。
  <script type="text/javascript">
    jQuery(window).load(function (){				// 画像など すべての読込が終了したら実行
      var topnav = jQuery('.topNavi');			// --------- ここに メニューバーの class名 を 書く --------
      var nav_top = topnav.offset().top;			// メニューバーの位置を取得

      var topnav_c = topnav.clone().css({"position":"fixed", "top":"0", "width": topnav.parent().width()});
      topnav_c.insertAfter(topnav);				// メニューバーのコピーを作成し 画面上部に固定
      dsp_nav();						// 表示 or 非表示 関数呼び出し(表示開始時に一回のみ実行)

      jQuery(window).scroll(dsp_nav);				// 表示 or 非表示 関数呼び出し(scrollイベント発生時)
      jQuery('body').bind('touchmove', dsp_nav);		// スマホ対応 (touchmoveイベント発生時) ※ 動作未確認

      function dsp_nav(){
        if (jQuery(window).scrollTop() > nav_top) {		// スクロール位置とメニューバーの位置を比較
          topnav_c.show();					// メニューバーのコピーを 表示
        } else {
          topnav_c.hide();					// メニューバーのコピーを 非表示
        }
      }

    });
  </script>
6行目、widthの設定を追加しました。( 3/20 修正 )
投票数:1 平均点:10.00
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2016/3/20 16:48 | 最終変更
kamezou  1st Class 居住地: 2013~  投稿数: 47
そして、応用編です。

メニューバーの下に、さらに ページナビも固定してみました。

  <script type="text/javascript">
    jQuery(window).load(function (){
      var topnav = jQuery('.topNavi');			// -------- メニューバー --------
      var nav_top = topnav.offset().top;

      var topnav_c = topnav.clone().css({"position":"fixed", "top":"0", "width": topnav.parent().width()});
      topnav_c.insertAfter(topnav);
      dsp_nav({'data':{pos:nav_top, j_obj:topnav_c}});

      jQuery(window).scroll({pos:nav_top, j_obj:topnav_c}, dsp_nav);
      jQuery('body').bind('touchmove', {pos:nav_top, j_obj:topnav_c}, dsp_nav);

      var pg_nav = jQuery('.pageNavi :first');		// -------- ページナビ --------
      if (pg_nav[0]) {
        var topnav_h = topnav.outerHeight();			// メニューバーの高さを取得
        var pg_nav_top = pg_nav.offset().top - topnav_h;

        var pg_nav_c = pg_nav.clone().css({"position":"fixed", "top": topnav_h, "width": pg_nav.parent().width(), "background-color": jQuery('#canvas').css("background-color")});
        pg_nav_c.insertAfter(pg_nav);
        dsp_nav({'data':{pos:pg_nav_top, j_obj:pg_nav_c}});

        jQuery(window).scroll({pos:pg_nav_top, j_obj:pg_nav_c}, dsp_nav);
        jQuery('body').bind('touchmove', {pos:pg_nav_top, j_obj:pg_nav_c}, dsp_nav);
      }

      function dsp_nav(e_obj){				// -------- 表示・非表示 --------

        if (jQuery(window).scrollTop() > e_obj.data.pos) {
          e_obj.data.j_obj.slideDown();
        } else {
          e_obj.data.j_obj.stop().hide();
        }
      }

    });
  </script>
18行目 background-color の指定を追加しました。( 3/20 修正 )
背景色の設定してある所から、自動で取得してきたかったのですが…あきらめました。
background-color が設定してある id または class を指定してください。( 3/21 修正 )
投票数:1 平均点:10.00
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2016/3/23 23:07 | 最終変更
kamezou  1st Class 居住地: 2013~  投稿数: 47
2行目は、こうした方がいいのかな。
    jQuery(function(){						// 画像読込前に実行。トップ画像の高さを指定しておくこと
投票数:0 平均点:0.00
  条件検索へ

Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities