If the background color is set to header-fixed-position, the color will fade in. However, if the background is an image, the image will not fade in.
Apologies for my lack of proficiency in English. Please refer to the sample code below. Try removing the comment around the background-image property in the CSS.
$(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;
/*background-image: url(https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg);*/
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);
} <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" class="container">
<h1>this is header</h1>
</div>
<div class="container">
<br>this is content<br>this is content<br> [...]