使導航欄在滾動開始時縮小

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