Я хочу, чтобы переход фонового изображения исчезал при добавлении класса

$(window).scroll(function() {
  if ($(document).scrollTop() > 0) {
    $('#header').addClass('headtop');
  } else {
    $('#header').removeClass('headtop');
  }
});

#header {
    transition: all 1s ease;
}

.headtop { 
    z-index: 997; 
    position: fixed; 
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 0;
    background-color: #aaaaaa;
    
    border-radius: 0px 0px 25px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity:1 !important;
}

#header .background {
  z-index: -1;
  position:absolute;
  width:100%;
  height: 69px;
  transition: all 1s ease;
  border-radius: 0px 0px 25px 25px;
  background-image: url(https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg);
  top: 0;
  opacity:0;
}

.headtop .background {
  opacity:1 !important;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id = "header">
  <div class = "background"></div>
  <h1>this is header</h1>
</div>
<div class = "container">
<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content

</div>