2017/03/25

スクロールすると、上部にグローバルナビゲーションを固定する。

tags : /

html

<div id="navi">
    <ul class="clearfix">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</div>

 

CSS

※好きなように編集してください。

#navi {
 width: 100%;
 height: auto;
 float: left;
 padding-right: 20px;
 padding-left: 20px;
 padding-bottom: 20px;
 padding-top: 20px;
 box-sizing: border-box;
 background-color: #000000;
}
.fixed {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
}

#navi ul{
 width: 100%;
 height: auto;
 float: left;
}

#navi li{
 width: auto;
 height: auto;
 float: left;
 padding-right: 20px;
 padding-left: 20px;
}

#navi li a{
 color: #FFFFFF;
}

 

JS

<script>
 $(function() {
 var nav = $('#navi');
 //表示位置
 var navTop = nav.offset().top+200;
 //ナビゲーションの高さ
 var navHeight = nav.height()+10;
 var showFlag = false;
 nav.css('top', -navHeight+'px');
 //ナビゲーションの位置まできたら表示
 $(window).scroll(function () {
 var winTop = $(this).scrollTop();
 if (winTop >= navTop) {
 if (showFlag == false) {
 showFlag = true;
 nav
 .addClass('fixed')
 .stop().animate({'top' : '0px'}, 200);
 }
 } else if (winTop <= navTop) {
 if (showFlag) {
 showFlag = false;
 nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
 nav.removeClass('fixed');
 });
 }
 }
 });
 });
 </script>
  • このエントリーをはてなブックマークに追加

Profoile

coralqualia
HaraYohei http://coralqualia.com/

当サイトの運営者。 ビジネスを成功へ導くため、「思いをカタチに変える」お手伝いをします。 印刷物、WEBサイトの制作はもちろん、その他なんでもご相談ください。 少しでもお客様のお役に立てればと思っております。 【Service】 ロゴ/販促ツール制作/パッケージ/誌面/各種広告制作/看板サイン/各種印刷 WEBサイト企画立案/Webデザイン/Webサイト制作/CMS(WordPress)構築/ECサイト構築/サーバー運用管理/サイト運営サポート イラスト/キャラクターデザイン Wechatを活用したサービスの提供 /中国でのWEBサイト構築・運営・販促活動