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

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

投稿ツリー


このトピックの投稿一覧へ

kamezou

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

msg# 1.1
depth:
1
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2016/3/20 16:48 | 最終変更
kamezou  1st Class 居住地: 2013~  投稿数: 51
そして、応用編です。

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

  <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 修正 )
投票数:3 平均点:10.00

  条件検索へ


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