使导航栏在滚动开始时缩小

Question

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

如何做到这一点？

Answer 1

使用CSS转换和一些 jQuery（4行）：

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

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

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

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');
    }
});