Появление блока про прокрутке почти до конца страницы

Question

    jQuery.noConflict();
(function($2) {
  $2(function() {

$2(window).scroll(function (){
        
        let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
var posY = scrollHeight - 1500;
        
        if ($2(window).scrollTop() > posY){
                $2('.bottom-item-all').addClass('bottom-item-all2');    

        } else{
           $2('.bottom-item-all').removeClass('bottom-item-all2');              
        }
   });
   
   });
})(jQuery);

Данный код работает, но чуток не так. Мне нужно, чтобы блоку добавлялся класс при достижении определенного отступа от низа страницы при прокрутке. Например 100px от конца страницы. И соответственно, чтобы класс удалялся выше 100px.

Answer 1

$(()=>{
    
    $(window).scroll(()=>{
        if($('body').height() - $(window).scrollTop()-$(window).height()<=100) {
            $(".block").addClass('bg_black')
        }
        else {
            $(".block").removeClass('bg_black')
        }
        $(".block h3").text('Скоролл: '+$(window).scrollTop())
        $(".block h5").text('Высота окна: '+$(window).height())
        $(".block h4").text('Высота документа: '+$('body').height())
    })
})

* {
    box-sizing: border-box;
}
.block {
    width:200px;
    height: 200px;
    background-color: brown;
    position: fixed;
    left:20px;
    top:30%;
    color:white;
    padding: 20px;
}

.bg_black {
    background-color: black;
}

body {
    height: 3000px;
    padding: 0;
    margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
                <h3>0</h3>
                <h5></h5>
                <h4></h4>
        </div>

БЛОГ НА HUSL

Появление блока про прокрутке почти до конца страницы

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