jquery - 隐藏的 jQuery 标头

Question

我对标题的想法正在碰壁，因为我不知道“效果”被称为什么；即使我已经看过很多次了。

我的想法是有一个隐藏的标题，当用户将光标放在屏幕顶部时，它会下拉。类似于 Windows 8 菜单，当您将光标放在屏幕一角时会出现该菜单。

如果有人能指出我正确的方向，我将不胜感激。

Answer 1

您可以使用animate(), 而不是向下滑动 div（使用slideDownor slideToggle），这实际上会移动整个 div

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;}
​

Answer 2

我会做这样的事情：http: //jsfiddle.net/V9Cfn/2/

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

本质上，如果鼠标足够靠近顶部，则显示您已固定到顶部的相关 div。