[ プログラミング ] 固定したヘッダーナビゲーションの表示方法

W3Qという質問サイトで以下のような質問が。

ということで、細かい仕様はともかく、そんな感じのサンプルを作ってみました。

問題は、マウスで表示・非表示させるところですが、マウスの位置を取得できるのでそれを使って実装してみます。

デモは以下からどうぞ。配布しているHTML5テンプレートを改造してみました。ページの一番上を表示しているときは、ナビゲーションが上部に固定されていますが、下にスクロールするとナビゲーションがスライドしながら非表示になります。その状態で、マウスをページ上部まで持ってくると、ナビゲーションがスライドしながら現れます。

DOMO

HTML5とCSS3とjQueryコードを分けています。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[DEMO]固定したヘッダーナビゲーションの表示方法</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="index.html">BLOG</a></li>
<li><a href="index.html">PROFILE</a></li>
<li><a href="index.html">CONTACT</a></li>
<li><a href="#sample">SAMPLE</a></li>
</ul>
</nav>
</body>
</html>

Java Script

$(function() {
    var $nav = $('nav');
    var showFlag = true;
    var navHeight = $nav.outerHeight(true);
    var mousePosition= 50;
    var scrollPosition = 100;

    // 要素の表示
    if ($(window).scrollTop() < navHeight){
         $nav.addClass('fix');
    }

    // マウスで表示
    $(window).mousemove( function(e) {
        if(showFlag == false){
            var mouseY = e.clientY;
            if(mouseY < mousePosition ) {
                 $nav.addClass('fix').stop().animate({'top' : '0px'}, 300);
            } else {
                 $nav.stop().animate({'top' : - navHeight + 'px'}, 300, function(){
                     $nav.removeClass('fix');
                });
            }
        }
    });

    // スクロールで表示
    $(window).scroll(function(e){
        var st = $(window).scrollTop();
        if (st < scrollPosition) {
            if(showFlag == false){
                 $nav.addClass('fix').stop().animate({'top' : '0px'}, 200);
                showFlag = true;
            }
        } else {
            if(showFlag){
                 $nav.stop().animate({'top' : - navHeight + 'px'}, 200, function(){
                     $nav.removeClass('fix');
                });
                showFlag = false;
            }
        }
    });
});

CSS

nav {
    display:none;
    width:100%;
    padding:5px 0;
    opacity:0.8;
    background:#000;
    z-index:10;
}
nav ul {
    position:relative;
    float:left;
    left:50%;
    margin:0;
}
nav li {
    position:relative;
    left:-50%;
    float:left;
    list-style:none;
    margin:0;
    padding:0 20px;
}
nav li a {
    color:#fff;
    text-decoration:none;
}
nav li a:hover {
    color:#dfdfdf;
    text-decoration:underline;;
}

.fix {
    display:block;
    position:fixed;
    top:0;
    left:0;
}