jquery - 非表示のjQueryヘッダー

Question

「効果」が何と呼ばれるかわからないので、私はヘッダーについて持っているアイデアでレンガの壁にぶつかっています。何度も見てきましたが。

私の考えは、ユーザーが画面の上部にカーソルを置くとドロップダウンする非表示のヘッダーを作成することです。画面の隅にカーソルを置いたときに表示されるWindows8メニューに似ています。

誰かが私を正しい方向に向けることができれば、私はそれをいただければ幸いです。

Answer 1

私はこのようなことをします：http：//jsfiddle.net/V9Cfn/2/

$(window).on('mousemove', function (e) {
   if (e.pageY < 100) {
       $("#showtop").slideDown();
   }
   else {
       $("#showtop").slideUp();        
   }
});

基本的に、マウスが上部に十分近い場合は、問題のdivを上部に固定したことを示します。

Answer 2

（またはanimate()を使用して）divを下にスライドする代わりに、を使用できます。これにより、実際にはdiv全体が移動します。slideDownslideToggle

http://jsfiddle.net/F6FRC/3/

<div class="wrapper">
    <div class="header">
        Shazam!
    </div>

    <div class="trigger">
    </div>
</div>​

$(function(){
    $(".trigger").mouseenter(function(){
        $('.header').animate({
            top: '0px',
            }, 500, function() {
        });
    }).mouseleave(function(){
        $('.header').animate({
            top: '-20px',
        }, 500, function() {
        });
    });
});​



.wrapper   {position:relative;}
.header    {background-color: #F00; position:absolute; height: 20px; width: 100%; top: -20px; left: 0px;}
.trigger   {height: 50px; width: 100%; border: 1px solid #EFEFEF;}
​