addClass/removeClass to body, когда div находится в окне просмотра

Question

<div id="title-box"> 
    <div class="title">Title</div> 
</div> 

<div id="gallery"> 
    <div class="gallery-image"></div> 
    <div class="gallery-image"></div> 
    <div class="gallery-image"></div> 
    <div class="gallery-image"></div> 
</div> 

<div id="text-box"> 
    <div class="text"> 
     One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin... 
    </div> 
</div> 

Я пробовал различные плагины jQuery, но я не мог получить желаемый результат. Я хотел бы добавить класс к тела, когда элемент «галереи» виден в окне, и удалить класс в теле когда деталь «галерея» больше не видна.

Я новичок в jQuery.

Answer 1

Пожалуйста, попробуйте это

$(document).ready(function(){ 
    $('#gallery').bind('inview', function (event, visible) { 

     if (visible == true) { 
     // element is now visible in the viewport 
      $('body').addClass('myclass'); 
     } 
     else{ 
      $('body').removeClass('myclass'); 
      alert('removed... pleasecheck body'); 
     } 
    }); 
    $('#gallery').trigger('inview'); 
}); 

DEMO

Answer 2

Вы можете проверить, является ли элемент из вьюпорте или нет. В зависимости от возвращения вы можете добавить класс

function isElementOutOfViewport (el) { 
 
    var rect = el.getBoundingClientRect(); 
 
    return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight; 
 
} 
 

 
alert(isElementOutOfViewport(document.getElementById('bottom')));

.bottom {margin-top:100vH}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="title-box"> 
 
    <div class="title">Title</div> 
 
</div> 
 

 
<div id="gallery"> 
 
    <div class="gallery-image"></div> 
 
    <div class="gallery-image"></div> 
 
    <div class="gallery-image"></div> 
 
    <div class="gallery-image"></div> 
 
</div> 
 

 
<div id="text-box"> 
 
    <div class="text"> 
 
     One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin... 
 
    </div> 
 
</div> 
 
<div id="bottom" class="bottom">Not in view port</div>