jquery - 跟踪光标悬停位置并显示类似于 OSX dock/Windows 开始栏的隐藏菜单

Question

如何使用 jQuery HTML 和 CSS 实现这种效果 - http://www.teehanlax.com/about/ .看看您如何只需将鼠标悬停在网站顶部，菜单就会自动下拉，类似于 OSX 的停靠栏效果和 Windows 自动显示/隐藏开始栏。

更新:

澄清。我指的是当您在站点中间并将鼠标光标移到视口(viewport)顶部时，导航会自动向下滑动的效果。您不需要滚动，我相信它正在检测您的光标相对于视口(viewport)的位置。

更新 2:

不幸的是，它仍然没有完全适合我。 :( 我想使用这些功能集重新创建与 teehanlax.com/about 相同的效果:

1. 向下滚动时隐藏导航/向上滚动时显示导航
2. 当鼠标悬停在视口(viewport)顶部时显示导航
3. 当滚动达到偏移高度时，从静态导航更改为固定导航。

棘手的部分不是使用 getgo 中的 position:absolute 导航，而是使用实际占用高度的静态导航，因此我必须考虑到这一点。此外，当屏幕宽度 < 768px 时，导航变成切换菜单，鼠标悬停效果必须考虑菜单的全高。

似乎现在在 Safari 上一切正常，除非您尝试 mouseout 我无法使其正常运行。但是，在我的 Mac 上的 Chrome 中，鼠标悬停事件似乎没有正确触发 - 导航似乎立即打开和关闭。此外，在移动 View (宽度 < 768 像素)中时，我遇到了导航重影问题。不知道这是什么原因..

这是我最好的现场实现 - http://alchuang.com/indexnav.html 以下是3个功能各自的JS。如何结合这 3 种功能，使它们相互配合并在 Chrome 和 Safari 上都能正常运行？

<强>1。向下/向上滚动时隐藏/显示导航的 JS:

var didScroll;
var lastScrollTop = 0;
var delta = 10;
var navbarHeight =  $('.navbar').height();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    var classin = $('.navbar-collapse').hasClass("in");
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-show.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight && !classin){
        // Scroll Down
            $('.navbar').removeClass('nav-show').addClass('nav-hidden');              
            $('.navbar-collapse').removeClass("in");
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height() && !classin) {          
                $('.navbar').removeClass('nav-hidden').addClass('nav-show');
                $('.navbar-collapse').removeClass("in");
        }
    }

    lastScrollTop = st;
}

<强>2。鼠标悬停显示/隐藏的JS

$(function() {
    var mouseY = 0;
    var navbarHeight = $(".navbar").outerHeight();
    document.addEventListener('mousemove', function(e) {
    mouseY = e.clientY || e.pageY;
    if(mouseY < navbarHeight) {
       $('.navbar').removeClass('nav-hidden').addClass('nav-show');
    }
}, false);

$('.navbar').mouseout(function() {
  if($(window).scrollTop() > navbarHeight) {
     $('.navbar').removeClass('nav-show').addClass('nav-hidden');
  }
});

<强>3。静态导航转固定导航的JS(addNavMargin抵消静态导航的高度)

var scroll_start = 0;
var startchange = $('section#passion');
var offset = startchange.offset();
if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $("section#viewer").addClass('addNavMargin');
          $(".navbar-default").addClass('navbar-hover');
       } else if (scroll_start == 0) {
          $("section#viewer").removeClass('addNavMargin');
          $(".navbar-default").removeClass('navbar-hover');

       }
   });
}          
}); 

Answer 1

这是一个简单的例子，fiddle

<nav>
  <ul>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
  </ul>
</nav>

---

nav {
  background: violet;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;

  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
nav ul {
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
  line-height: 40px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  margin: 0 10px;
  color: #333;
}

---

<script>
  $(function() {
    var mouseY = 0;

    document.addEventListener('mousemove', function(e) {
      mouseY = e.clientY || e.pageY;
      if(mouseY < 70) {
         $('nav').css({ top: '0' });
      }
    }, false);

    $(window).scroll(function() {
      var sc = ($(this).scrollTop() > 70) ? $('nav').css({ top: '-70px' }) : $('nav').css({ top: '0' });
    });

    $('nav').mouseout(function() {
      if($(window).scrollTop() > 70) {
         $('nav').css({ top: '-70px' });
      }
    });
  });
</script>

更新:添加了滚动显示/隐藏。