изменения CSS класса в зависимости от положения прокрутки

Question

У меня есть следующие HTML

<header class="fixed">...</header> 
<div id="content"> 
    <div id="sidemenu" class="fixed">...</div> 
    <div id="scroll">...</div> 
</div> 
<footer class="fixed">...</footer> 

С различными правилами позиционирования в CSS и правилах

.fixed { 
    position: fixed; 
} 

Это достигает желаемый эффект только в DIV с идентификатором перемещение прокрутки. Однако это может оставить нижний колонтитул вне поля зрения.

Что я хочу сделать, когда дно прокрутки div достигнет нижней части нижнего колонтитула, измените position: fixed на position: absolute, а затем все прокрутите вверх, показывая нижний колонтитул.

Но я не знаю, как это сделать. Я смотрел на waypoints, но я немного над головой.

Answer 1

Для этого у вас будет событие onScroll. И проверьте, когда координаты прокрутки div совпадают с координатами нижнего колонтитула. Как только они совпадут, измените позицию на «абсолютную» в реализации обработчика.

Answer 2

что-то подобное должно решить вашу проблему. попробуйте следующее:

$(window).scroll(function() { 
    var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop(); 

    if (scrollBottom <= $("footer").height()) { 
     $("footer").css("position", "absolute"); 
     } 
     else { 
      $("footer").css("position", "fixed"); 
     } 
});