How to transition a CSS class between two separate additional classes?

Question

I have two jQuery scripts that add different effects to my header. The first one is a hover effect that fades the background colour from transparent to white. The second one gives it a fixed position and uses two additional classes (.scroll-1 & .scroll-2) to allow it to slide down from the top of the window.

The problem I'm having is that the both of these jQuery animations are using the same transition speeds and I can't work out through any amount of research if there is a way of allowing it to set separate speeds for transitions to multiple different CSS classes.

For example, the header is set to transition: all .5s, which works perfectly when transitioning between background-color:transparent; and background-color:#fff; on the hover effect.

On the scroll effect however, I want the background-color transition to be instant rather than .5s, and I'm not sure if there is a way I can set the transition speed at different values for different CSS classes. Can anyone help?

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

/* HEADER HOVER */

    $(".header").hover(function() {
        
            $("body").addClass("hover");
        
		
    }, 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');
			
		}
		
		else {
			
            $('body').removeClass('scroll-1');
       
        
        		$('body').removeClass('scroll-2');
        }
		
	 });

/* END HEADER SCROLL */


});

/* MAIN SITE STRUCTURE */

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

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

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

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    	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;
	-webkit-flex: 1;
	-ms-flex: 1;
	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;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	        align-items: center;

  height: auto;
	width: 100%;		
  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

all you need to add is this

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

Answer 2

Try below css:

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