Остановить фиксированное положение в нижнем колонтитуле
Я ищу решение популярной проблемы остановки фиксированного объекта в нижнем колонтитуле страница.
У меня в основном есть фиксированное поле «Поделиться» в нижнем левом углу экрана, и я не хочу, чтобы оно прокручивалось по нижнему колонтитулу, поэтому мне нужно, чтобы он останавливался примерно на 10 пикселей над нижним колонтитулом. .
Я рассмотрел и другие вопросы здесь, а также другие. Ближайшая / самая простая демонстрация, которую я смог найти, - это http://jsfiddle.net/bryanjamesross/VtPcm/ , но я не смог заставить ее работать в моей ситуации.
Вот HTML-код для общего блока:
... и CSS:
#social-float{
position: fixed;
bottom: 10px;
left: 10px;
width: 55px;
padding: 10px 5px;
text-align: center;
background-color: #fff;
border: 5px solid #ccd0d5;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: none;
}
Нижний колонтитул #footer , и у него нет фиксированной высоты, если это имеет значение .
Если бы кто-нибудь мог помочь мне создать для этого простое решение jQuery, я был бы очень признателен!
1 ответ
Я внес некоторые изменения во второй по популярности ответ, поскольку я нашел, что это работало лучше на меня. Изменения используют window.innerHeight, поскольку это более динамично, чем добавление Вашей собственной высоты для военно-морского (выше используемого + 570). это позволяет коду продолжать работать мобильный, планшет и рабочий стол динамично.
$(window).scroll(() => {
//Distance from top fo document to top of footer
topOfFooter = $('#footer').position().top;
// Distance user has scrolled from top + windows inner height
scrollDistanceFromTopOfDoc = $(document).scrollTop() + window.innerHeight;
// Difference between the two.
scrollDistanceFromTopOfFooter = scrollDistanceFromTopOfDoc - topOfFooter;
// If user has scrolled further than footer,
if (scrollDistanceFromTopOfDoc > topOfFooter) {
// add margin-bottom so button stays above footer.
$('#floating-button').css('margin-bottom', 0 + scrollDistanceFromTopOfFooter);
} else {
// remove margin-bottom so button goes back to the bottom of the page
$('#floating-button').css('margin-bottom', 0);
}
});