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

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

0 голосов
/ 05 мая 2018

Если фон имеет цвет-фиксированный заголовок, цвет исчезает, но если фон - изображение, изображение не исчезает.

Извините, я плохо владею английским, см. Пример кода ниже. Попробуйте удалить комментарий background-image в 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>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>

1 Ответ

0 голосов
/ 05 мая 2018

Этого можно добиться, добавив div с фоновым изображением и используя переход непрозрачности от 0 до 1.

Вот пример с вашим кодом: 

$(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>
...