Я недавно столкнулся с этой же проблемой, опубликовал мое решение также здесь:
Предотвращение отображения элемента в верхней части нижнего колонтитула при использовании позиции: исправлено
Вы можете достичь решения, используя свойство position элемента с помощью jQuery, переключаясь между значением по умолчанию (static для divs), fixed и absolute.
Вам также понадобится элемент контейнера для вашего фиксированного элемента. Наконец, для предотвращения перехода фиксированного элемента через нижний колонтитул этот элемент контейнера не может быть родительским для нижнего колонтитула.
Часть javascript включает в себя вычисление расстояния в пикселях между вашим фиксированным элементом и верхней частью документа и сравнение его с текущей вертикальной позицией полосы прокрутки относительно объекта окна (т. Е. Числа пикселей выше, которые скрыты от видимая область страницы) каждый раз, когда пользователь прокручивает страницу.
Когда при прокрутке вниз фиксированный элемент собирается исчезнуть выше, мы меняем его положение на фиксированный и придерживаемся сверху страницы.
Это заставляет фиксированный элемент проходить через нижний колонтитул, когда мы прокручиваем вниз, особенно если окно браузера маленькое.
Поэтому мы вычислим расстояние в пикселях нижнего колонтитула от верхней части документа и сравним его с высотой фиксированного элемента плюс вертикальное положение полосы прокрутки: когда фиксированный элемент собирается пройти над нижним колонтитулом, мы будем измените его положение на абсолютное и вставьте внизу, чуть выше нижнего колонтитула.
Вот общий пример.
Структура HTML:
<div id="content">
<div id="leftcolumn">
<div class="fixed-element">
This is fixed
</div>
</div>
<div id="rightcolumn">Main content here</div>
<div id="footer"> The footer </div>
</div>
CSS:
#leftcolumn {
position: relative;
}
.fixed-element {
width: 180px;
}
.fixed-element.fixed {
position: fixed;
top: 20px;
}
.fixed-element.bottom {
position: absolute;
bottom: 356px; /* Height of the footer element, plus some extra pixels if needed */
}
JS:
// Position of fixed element from top of the document
var fixedElementOffset = $('.fixed-element').offset().top;
// Position of footer element from top of the document.
// You can add extra distance from the bottom if needed,
// must match with the bottom property in CSS
var footerOffset = $('#footer').offset().top - 36;
var fixedElementHeight = $('.fixed-element').height();
// Check every time the user scrolls
$(window).scroll(function (event) {
// Y position of the vertical scrollbar
var y = $(this).scrollTop();
if ( y >= fixedElementOffset && ( y + fixedElementHeight ) < footerOffset ) {
$('.fixed-element').addClass('fixed');
$('.fixed-element').removeClass('bottom');
}
else if ( y >= fixedElementOffset && ( y + fixedElementHeight ) >= footerOffset ) {
$('.fixed-element').removeClass('fixed');
$('.fixed-element').addClass('bottom');
}
else {
$('.fixed-element').removeClass('fixed bottom');
}
});