Question

如何使用jQuery HTML和CSS实现此效果 - http://www.teehanlax.com/about/。看看你如何简单地悬停在网站的顶部，菜单将自动下拉，类似于OSX对底座和windows自动显示/隐藏起始栏的效果。

更新

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

UPDATE2：

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

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

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

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

这是我最好的实现 - 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>

更新：在滚动条中添加了显示/隐藏。

Answer 2

您可以使用此脚本/教程 https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c

跟踪光标悬停位置和显示隐藏菜单，类似于OSX dock / Windows start bar

2 个答案: