Blog

スクロールで出現するFixメニューと、一定スクロールで消えるFixメニュー

2016.06.04 | jQuery | 489views


pcprogruming

スクロールを開始するとにゅるっと出現するフローティングメニューと、そのフローティングメニューを一定スクロールで消すTipsです。ボトム固定やトップ固定などはCSSの記述でなんとかします。

<div class="fix-menu">
 <ul>
  <li>メニュー</li>
 </ul>
</div>
.fix-menu {
  position: fixed;
  bottom: 0;
  height: auto;
  z-index: 999;
  width: 100%;
  background: rgba(0,0,0,0.8);
}

フローティングメニューはこういう感じで作るとよいでしょう。この場合はボトム固定としていますが、トップ固定の場合は top:0; にするだけですね。

$(function() {
    var topMenu = $('.fix-menu');    
    topMenu.hide();
    $(this).scroll(function () {
        if ($(this).scrollTop() > 160) {
            topMenu.fadeIn();
        } else {
            topMenu.fadeOut();
        }
    });
});

ざっと説明するとスクロール160でメニューが出てくる、それ以外だと消える。という感じのスクリプトになっています。ただしこれだけではページトップヘ戻った時に消えるだけで後はずっと出たままになってしまいます。


$(function () {
 var $body = $('.fix-menu');
 $(this).scroll(function() { 
   var topOffset =  $('#common-footer').offset().top;
   var navTypeAOffsetTop = parseInt(topOffset) - 700;
   if($(this).scrollTop() > navTypeAOffsetTop) {
     $body.addClass('is-fixed');
   } else {
     $body.removeClass('is-fixed');
   }
 });
});

これで指定箇所でフローティングメニューが消えます。

var topOffset =  $('#common-footer').offset().top;

例では #common-footer の座標を取得して変数へ。

var navTypeAOffsetTop = parseInt(topOffset) - 700;

ここで微調整を図ります。消えるのが遅い、と思った場合は -700 を調整していきます。

.is-fixed {
  display: none!important;
}

CSSで絶対消えろ!と宣言しておかないと消えないので注意です。

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

プログラミングは本業ではなくあくまでも趣味の一環として取り組んでいます。月1回ペースで東京へ出張へ行っておりますので、機会があれば是非お話をしましょう。

LLC JIRIKI