В проекте у меня действительно есть какой-то заголовок, закрепленный в нижней части экрана при загрузке страницы (это приложение для рисования, поэтому заголовок находится внизу, чтобы обеспечить максимальное пространство для элемента холста в широком окне просмотра).
Мне нужно, чтобы заголовок стал «абсолютным», когда он достигнет нижнего колонтитула при прокрутке, так как я не хочу, чтобы заголовок находился над нижним колонтитулом (цвет заголовка такой же, как и цвет фона нижнего колонтитула).
Я взял здесь самый старый ответ (отредактированный Gearge Millo), и этот фрагмент кода работал для моего варианта использования. С некоторой игрой я получил это сработало. Теперь фиксированный заголовок красиво располагается над нижним колонтитулом, когда достигает нижнего колонтитула.
Просто подумал, что поделюсь своим вариантом использования и тем, как это работает, и скажу спасибо! Приложение: http://joefalconer.com/web_projects/drawingapp/index.html
@media screen and (min-width: 1100px) {
height: 80px;
width: 100%;
position: absolute;
bottom: 0;
}
}
$.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' } );
}
});
};
if ( $('#heading').css("position") === "absolute" ) {
$('#heading').followTo(180);
}