スクロールで小さいナビゲーション

Question

このサイトのようなスクロールでナビゲーションバーを小さくするにはどうすればよいですか？ これは本当にスムーズに進んでいます。

https://websight.nl/

私はそれはおそらく、jQueryの中で行われている知っています。

Answer 1

これは例です。特定の高さにスクロールするクラスを適用する必要があります.CSSでは、そのクラスが追加されるときに縮小する必要があります。

$(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で行います。

スクロールしてヘッダー要素のクラスが「短く」なるため、例として指定したサイトがこれを行うことがわかります。あなたのコードは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クラスとそのうちの1つを新しいクラスにします。私はあなたが条件の両方のCSSを記述して、jqueryの

jQueryの

のビットを適用する必要があり

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

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

この

CSSのように新しいクラスとして.smallerを取っています

$(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はすでにそこにあることを検出します。