Question

我正在设计一个网站，我希望有一个固定在页面顶部的导航栏，但只要用户向下滚动就会变小。一个很好的例子是https://www.endgame.com/。如果可能的话，我想用CSS完成这个，但如果有必要的话，愿意做JavaScript。经过一些研究并查看Endgame的源代码，我无法弄清楚如何做到这一点。

如何实现这一目标？

Answer 1

使用CSS过渡，只使用 little jQuery（4行）：

＆＃13;

$(document).scroll(function() {
  if ($(this).scrollTop() > 10) { //Adjust 150
    $('#head').addClass('shrinked');
  } else {
    $('#head').removeClass('shrinked');
  }
});

＆＃13;

body {
  height: 9999px;
  margin: 0;
  background: url(http://webdesignledger.com/wp-content/uploads/2009/09/pattern_places_8.jpg) repeat;/* Added for sense of scrok=lling */
}
#head {
  background-color: red;
  height: 100px;
  width: 100%;
  position: fixed;
  top: 0;
}

#head, #head * { transition: all 0.3s ease; }

#head.shrinked {
  height: 30px;
}

#head.shrinked span {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="head">
  <span>My Header</span>
</div>

＆＃13;

CSS过渡将动画更改。当我们添加更改高度的类时，它将为其设置动画。这基本上是如何工作的。这使用CSS，所以如果你想添加新的样式，你只需要检测#head.shrinked然后你可以添加一个选择器。我用跨度来改变颜色。导航缩小时，您可以使用它来显示不同的徽标。

您链接的网站实际上使用了这种方法（我已经删除了额外的东西）。

$(window).on('scroll', function(){ 
  var $this = $(this);
  if($this.scrollTop() > 1){
    $header.addClass('shrt');
  }else{
    $header.removeClass('shrt');
  }

});

它还添加了shrt类

<header class="cf" role="banner" style="top: 0px;">

变为：

<header class="cf shrt" role="banner" style="top: 0px;">

CSS也使用过渡

transition-delay: 0s, 0s;
transition-duration: 1s, 1s;
transition-property: top, height;
transition-timing-function: ease, ease;

更改的属性是：

max-width: 20px !important;
border-top: 5px solid #040407;
font-size: 80%;
height: 24px;
width: 24px;
top: 14px;

Answer 2

Headroom.js很酷，但与最终游戏的固定导航有点不同。向下滚动时，会议室隐藏导航，并在向上滚动时再次显示导航。 http://wicky.nillia.ms/headroom.js/

如果您想尝试一下，这里有一些代码可以使用自定义滚动事件初始化余量并切换hidden类以获取大小版本的徽标。

// Show and hide menu on scroll
$('#primary-nav-container').headroom({
    // Pixels from top
    'offset': 200,
    // Scrolling tolerance
    'tolerance': 5,
    'classes': {
        /*'initial': 'animated',*/
        'pinned': 'slideDown',
        'unpinned': 'slideUp'
    },
    // Callback when nav pinned
    onPin : function() {

        $('#primary-nav-container').fadeIn();
    },
    // Callback when nav unpinned
    onUnpin : function() {

        $('#primary-nav-container').fadeOut();
    },
    // Callback when above offset
    onTop : function() {

        // Show large logo
        $('.large').removeClass('hidden');
        $('.small').addClass('hidden');
    },
    // Callback when below offset
    onNotTop : function() {

        // Show small logo
        $('.large').addClass('hidden');
        $('.small').removeClass('hidden');
    }
});

使滚动开始时收缩的导航栏

2 个答案: