Как сделать динамичную смену блока на другой блок при скролле?

Question

function ABC() {
  if ($(window).scrollTop() == 0) {
    $('#a').css('background', 'blue');
  } else {
    $('#a').css('background', 'red');
  }
}
ABC();

$(window).scroll(function() {
  ABC();
});

#a {
  width: 100%;
  position: fixed;
  height: 20px;
  padding: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="a"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Answer 1

Если правильно понял вопрос, то так:

function ABC() {
  if ($(window).scrollTop() == 0) {
    $('.block.a').css('display', 'block');
    $('.block.b').css('display', 'none');
  } else {
    $('.block.a').css('display', 'none');
    $('.block.b').css('display', 'block');
  }
}
ABC();

$(window).scroll(function() {
  ABC();
});

.block {
  width: 100%;
  position: fixed;
  height: 20px;
  padding: 3px;
}

.block.a {
  background: red;
}

.block.b {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="block a">Блок 1</div>
<div class="block b">Блок 2</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

БЛОГ НА HUSL

Как сделать динамичную смену блока на другой блок при скролле?

Ответы (1 шт):