如何在两个独立的附加类之间转换CSS类？

Question

我有两个jQuery脚本，它们为我的头添加了不同的效果。第一种是悬停效应，使背景颜色从透明变为白色。第二种方法给出一个固定的位置，并使用两个额外的类(.scroll-1 & .scroll-2)来允许它从窗口顶部向下滑动。

我遇到的问题是，这两个jQuery动画都使用相同的转换速度，如果有一种方法允许它为多个不同的CSS类的转换设置单独的速度，我就无法通过任何研究得出结果。

例如，标头被设置为transition: all .5s，当在悬停效应下在background-color:transparent;和background-color:#fff;之间转换时，这将完美地工作。

然而，在滚动效果中，我希望背景颜色转换是即时的，而不是.5s，我不确定是否有一种方法可以为不同的CSS类设置不同值的转换速度。有人能帮忙吗？

​

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>

​

小提琴

Answer 1

在css下面试一试：

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