滾動時導航較小

Question

如何使導航欄像本網站一樣滾動得更小？ 這是一個非常順利。

https://websight.nl/

我知道它是在JQuery中可能完成的。

Answer 1

這裏是一個例子。你需要應用一個滾動到特定高度的類，並且在添加該類時，你必須縮小它。

$(document).scroll(function() { 
 
    if ($(document).scrollTop() > 100) { 
 
    $('.header').addClass('shrinkIt'); 
 
    } else { 
 
    $('.header').removeClass('shrinkIt'); 
 
    } 
 
})

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.header { 
 
    width: 100%; 
 
    background: rgba(255, 255, 255, 0.6); 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    padding: 50px 100px; 
 
    transition: all .3s ease; 
 
    font-size: 22px; 
 
} 
 
.header.shrinkIt { 
 
    padding: 20px 100px; 
 
    font-size: 16px; 
 
} 
 
.content { 
 
    background: #2b2b99; 
 
    height: 1400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="header"> 
 
    I will shrink. 
 
    </div> 
 

 
    <div class="content"> 
 

 

 

 
    </div> 
 
</div>

Answer 2

您可以在切換文檔正文的類的窗口對象上有一個scroll event處理程序。然後從CSS中將設計設置爲您想要的樣子。至於平滑性，jQuery有一個animate函數可以跨瀏覽器，但通常你可以用CSS transition來完成。

您可以看到，您作爲示例給出的網站執行此操作是因爲您滾動並且標題元素的類更改爲「short」。你可以在custom.js中找到他們的代碼：

// Scroll to top 
    jQuery(window).scroll(function() 
    { 
     if (jQuery(this).scrollTop() > 100) 
     { 
      jQuery('header.navbar').toggleClass('short', true); 
      jQuery('.scrollup').fadeIn(300); 
      jQuery('.scrollup-jobs').fadeIn(300); 
     } 
     else 
     { 
      jQuery('header.navbar').toggleClass('short', false); 
      jQuery('.scrollup').fadeOut(1000); 
      jQuery('.scrollup-jobs').fadeOut(1000); 
     } 
    }); 

Answer 3

使2個CSS類和其中一個新類。我正在.smaller作爲一類新的這樣

CSS

.navigation{ 
    /*css for larger navigation*/ 
} 

.navigation.smaller{ 
    /*css for smaller navigation*/ 
} 

你需要編寫CSS的兩個條件，然後申請一個位的jQuery

JQUERY

的

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     var windowScrol = $('html, body').scrollTop(); 
     if(windowScrol>=100){ //scroll value can be changed accordingly 
      $('.navigation').addClass('smaller'); 
     } else { 
      $('.navigation').removeClass('smaller'); 
     }; 
    }); 
}); 

A bove jquery會檢測你是否將窗口滾動到100px，它會將類添加到導航中，並且css已經存在。