У меня возникают проблемы с добавлением цвета фона при прокрутке. В настоящее время мой код работает, но не отображается, пока я не прокручу до конца div. который равен background-overlay.

Я хотел бы активировать черный класс в тот момент, когда я прокручиваю класс фонового наложения. Другая проблема - когда я прокручиваю div, класс не удаляется. Что-то мне не хватает в приведенном ниже коде?

https://jsfiddle.net/e6tfgs0a/2/

Код фрагмента:

$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= $('.background-overlay').offset().top) { // check the offset top
        $( ".background-overlay" ).addClass( "black" );
        
    } else if(scroll >= $('.background-overlay').offset().top+$('.background-overlay').height()){ // check the scrollHeight
        $( ".background-overlay" ).removeClass( "black" );
    }
  });
});
.full-height, .page {
  height:500px;
}

.black {
  background: #000000; 
    transition: background-color 1s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
    
  </div>
  
  <section class="full-height background-overlay" >
    </section>
  
  <div class="page">
   
  </div>
2
user3756781 15 Янв 2021 в 20:16

2 ответа

Лучший ответ

Если я понимаю ваш вопрос, первая проверка условия будет offsettop - height вашего div, а вторая - там, где есть ошибка в условии (версия условия),

Также добавление перехода к вам .background-overlay вместо .black будет иметь эффект при прокрутке вверх вниз

$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var $divBlack = $('.background-overlay');
    
    if (scroll >= $divBlack.offset().top - $divBlack.height()) { // check the offset top
      $divBlack.addClass("black");

    } else if (scroll <= $divBlack.offset().top + $divBlack.height()) { // check the scrollHeight
      $divBlack.removeClass("black");
    }
  });
});
.full-height,
.page {
  height: 500px;
  border-bottom: 1px solid black;
}

.black {
  background: #000000;
}

.background-overlay {
  transition: background-color 2s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">


</div>

<section class="full-height background-overlay">

</section>
<div class="page">



</div>
0
Spring 15 Янв 2021 в 17:31
65740608