В проекте у меня фактически есть какой-то заголовок, прикрепленный к нижней части экрана при загрузке страницы (это приложение для рисования, поэтому заголовок находится внизу, чтобы обеспечить максимальное пространство для элемента canvas в широком окне просмотра).
Мне нужно, чтобы заголовок стал «абсолютным», когда он достигает нижнего колонтитула при прокрутке, поскольку я не хочу, чтобы заголовок нижнего колонтитула (цвет заголовка совпадает с цветом фона нижнего колонтитула).
Я взял самый старый ответ здесь (отредактированный Gearge Millo), и этот фрагмент кода работал для моего варианта использования. С некоторой игрой вокруг меня это заработало. Теперь фиксированный заголовок прекрасно расположен над нижним колонтитулом, как только он достигает нижнего колонтитула.
Просто подумал, что поделюсь своим сценарием использования и тем, как он работает, и скажу спасибо!
Приложение: http://joefalconer.com/web_projects/drawingapp/index.html
/* CSS */
@media screen and (min-width: 1100px) {
#heading {
height: 80px;
width: 100%;
position: absolute; /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
bottom: 0;
}
}
// jQuery
// Stop the fixed heading from scrolling over the footer
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css( { position: 'absolute', bottom: '-180px' } );
} else {
$this.css( { position: 'fixed', bottom: '0' } );
}
});
};
// This behaviour is only needed for wide view ports
if ( $('#heading').css("position") === "absolute" ) {
$('#heading').followTo(180);
}