CSSクラスを別の2つの追加クラスに移行するにはどうすればよいですか？

Question

私はヘッダーに異なる効果を加える2つのjQueryスクリプトを持っています。最初のものは背景色を透明から白にフェードさせるホバー効果です。 2番目のクラスは固定位置を与え、2つの追加クラス（.scroll-1 & .scroll-2）を使用して、ウィンドウの上からスライドさせることができます。

私が抱えている問題は、これらのjQueryアニメーションの両方が同じ遷移速度を使用していることです。転移の速度を別々に設定できるようにする方法があれば、複数の異なるCSSクラスに適用できます。

たとえば、ヘッダーはtransition: all .5sに設定されています。これは、ホバー効果でbackground-color:transparent;とbackground-color:#fff;の間で移行するときに完全に機能します。

しかし、スクロール効果では、背景色の遷移を.5sではなく瞬間的にしたいと思います。異なるCSSクラスの異なる値で遷移速度を設定できる方法があるかどうかはわかりません。誰も助けることができますか？ CSS以下

jQuery(document).ready(function($) { 
 

 
/* HEADER HOVER */ 
 

 
    $(".header").hover(function() { 
 
     
 
      $("body").addClass("hover"); 
 
     
 
\t \t 
 
    }, function() { 
 
     $("body").removeClass("hover"); 
 

 
    }); 
 

 
/* END HEADER HOVER */ 
 

 
/* HEADER SCROLL */ 
 

 
    $(window).scroll(function() { 
 

 
     if ($(this).scrollTop() > 75) { 
 

 
      $('body').addClass('scroll-1'); } 
 
      
 
     
 
     if ($(this).scrollTop() > 100) { 
 

 
      $('body').addClass('scroll-2'); 
 
\t \t \t 
 
\t \t } 
 
\t \t 
 
\t \t else { 
 
\t \t \t 
 
      $('body').removeClass('scroll-1'); 
 
     
 
     
 
     \t \t $('body').removeClass('scroll-2'); 
 
     } 
 
\t \t 
 
\t }); 
 

 
/* END HEADER SCROLL */ 
 

 

 
});

/* MAIN SITE STRUCTURE */ 
 

 
html { 
 
    position:relative; 
 
\t height:100%; 
 
    background-color:pink; 
 
\t 
 
} 
 

 
body { 
 
    min-height:100%; 
 
    margin:0; 
 
    padding:0; 
 

 
\t display:-webkit-box; 
 
    display:-webkit-flex; 
 
    display:-ms-flexbox; 
 
    \t \t display:flex; 
 

 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    \t flex-direction: column; 
 
} 
 

 
.header { 
 
    position:absolute; 
 
    height:50px; 
 
    width:100%; 
 
    background-color:transparent; 
 
    border-bottom-color:black; 
 
    border-bottom-width:2px; 
 
    border-bottom-style:solid; 
 
    transition: all .5s; 
 
} 
 

 
body.hover .header { 
 
    background-color:#fff; 
 
} 
 

 
body.scroll-1 .header { 
 
    position:fixed; 
 
    background-color:#fff; 
 
    top:-50px; 
 
} 
 

 
body.scroll-2 .header { 
 
    top:0px; 
 
} 
 

 
ul.menu { 
 
    display:inline-block; 
 
} 
 

 
ul.menu li { 
 
    color:green; 
 
    display:inline-block; 
 
    margin: 0px 20px; 
 
} 
 

 
.content { 
 
    -webkit-box-flex: 1; 
 
\t -webkit-flex: 1; 
 
\t -ms-flex: 1; 
 
\t flex: 1; 
 
    transition: all .6s cubic-bezier(.645,.045,.355,1); 
 
    width:85%; 
 
    margin-top:80px; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    padding-top:20px; 
 
} 
 

 

 
.footer { 
 
    display:-webkit-box; 
 
\t display:-webkit-flex; 
 
\t display:-ms-flexbox; 
 
\t display:flex; 
 
\t -webkit-box-orient: vertical; 
 
\t -webkit-box-direction: normal; 
 
\t -webkit-flex-direction: column; 
 
\t -ms-flex-direction: column; 
 
\t   flex-direction: column; 
 
\t -webkit-box-align: center; 
 
\t -webkit-align-items: center; 
 
\t -ms-flex-align: center; 
 
\t   align-items: center; 
 

 
    height: auto; 
 
\t width: 100%; \t \t 
 
    padding: 10px 0 10px 0; 
 
    background-color: #efefef; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header class="header"> 
 
    <ul class="menu"> 
 
    <li>Link 1</li> 
 
    <li>Link 2</li> 
 
    <li>Link 3</li> 
 
    </ul> 
 
    
 
</header> 
 

 

 
<div class="content"> 
 

 

 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
 

 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
 

 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
 

 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
 

 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
 

 
</div> 
 

 
<footer class="footer"> 
 
    Footer 
 
</footer>

jsfiddle

Answer 1

あなたが追加する必要があるのは、この

body.scroll-1 .header { 
    transition: background-color 0s; 
} 

Answer 2

試してみてください。

body.scroll-1 .header { 
    position:fixed; 
    background-color:#fff; 
    top:-50px; 
    transition: all 0s !important; 
}