Как присвоить/убрать position: fixed; при скроллинге?

Question

Anton Dyshkant @vyshkant

developer

Как присвоить/убрать position: fixed; при скроллинге?

Понимаю, что вопрос заслуживает RTFM, но всё же надеюсь на помощь.

Ситуация следующая: на сайте есть два блока, которые при определенных условиях скроллинга должны получить position: fixed и быть закреплены у верхнего и нижнего краев браузера.

Первый блок - меню, которое при загрузке страницы находится ниже шапки, а при скроллинге вниз должно остаться у верхнего края браузера.
Второй блок - полоска, прижатая к нижней части окна браузера, которая при скроллинге вниз должна прижаться к верху футера (т.е. потерять position: fixed;).

Догадываюсь, что решение предполагает использование jquery. Прошу помочь в реализации данной задумки.

Вопрос задан более трёх лет назад
14511 просмотров

3 комментария

Подписаться 5 Оценить 3 комментария

Anton Dyshkant @vyshkant Автор вопроса

$(window).scroll(function(){
		if ($(window).scrollTop() > $("#logoSearch").outerHeight(true)) {
			$("#pathwayFonts").addClass("sticky");
		}
		else {
			$("#pathwayFonts").removeClass("sticky");
		}
		if (($(window).scrollTop() + $(window).height()) < ($("html").height() - $("#footer").outerHeight())) {
			$("#fixedBottom").addClass("sticky-footer");
		}
		else {
			$("#fixedBottom").removeClass("sticky-footer");
		}
	});

Написано более трёх лет назад

Anton Dyshkant @vyshkant Автор вопроса

Итого, работающий вариант такой:
html:

<!-- Верхний блок -->
			<div id="pathwayFontsSubs"></div>
			<div id="pathwayFonts"></div>
<!-- /Верхний блок -->
...
<!-- Нижний блок -->
			<div id="fixedBottomSubs" class="fixedBottomSubs"></div>
			<div id="fixedBottom" class="sticky-footer"></div>
<!-- /Нижний блок -->

css:

#fixedBottom, .fixedBottomSubs {
	height: 30px;
}
#pathwayFonts, .pathwayFontsSubs {
	height: 50px;
}

jquery:

$(window).scroll(function(){
		if ($(window).scrollTop() > $("#logoSearch").outerHeight(true)) {
			$("#pathwayFonts").addClass("sticky");
			$("#pathwayFontsSubs").addClass("pathwayFontsSubs");
		}
		else {
			$("#pathwayFonts").removeClass("sticky");
			$("#pathwayFontsSubs").removeClass("pathwayFontsSubs");
		}
		if (($(window).scrollTop() + $(window).height()) < ($("body").height() - $("#footer").outerHeight())) {
			$("#fixedBottom").addClass("sticky-footer");
			$("#fixedBottomSubs").addClass("fixedBottomSubs");
		}
		else {
			$("#fixedBottom").removeClass("sticky-footer");
			$("#fixedBottomSubs").removeClass("fixedBottomSubs");
		}
	});

Пояснения к коду:
блоки #pathwayFontsSubs и #fixedBottomSubs нужны для того, чтобы когда элементы #pathwayFonts и #fixedBottom находятся в позиции fixed высота документа оставалась постоянной и в момент перехода фиксед-нефиксед страница не дёргалась. Как видим, классы .sticky-footer и .fixedBottomSubs сразу присвоены нижним элементам, поскольку нижний блок сразу находится в позиции фиксед.

Написано более трёх лет назад

Anton Dyshkant @vyshkant Автор вопроса

добавка css:

.sticky {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
}
.sticky-footer {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 100;
}

Написано более трёх лет назад

$(window).scroll(function(){ if ($(window).scrollTop() > $("#logoSearch").outerHeight(true)) { $("#pathwayFonts").addClass("sticky"); } else { $("#pathwayFonts").removeClass("sticky"); } if (($(window).scrollTop() + $(window).height()) < ($("html").height() - $("#footer").outerHeight())) { $("#fixedBottom").addClass("sticky-footer"); } else { $("#fixedBottom").removeClass("sticky-footer"); } });
Итого, работающий вариант такой:
html:
 <div id="pathwayFontsSubs"></div> <div id="pathwayFonts"></div>  ...  <div id="fixedBottomSubs" class="fixedBottomSubs"></div> <div id="fixedBottom" class="sticky-footer"></div> 

css:
#fixedBottom, .fixedBottomSubs { height: 30px; } #pathwayFonts, .pathwayFontsSubs { height: 50px; }

jquery:
$(window).scroll(function(){ if ($(window).scrollTop() > $("#logoSearch").outerHeight(true)) { $("#pathwayFonts").addClass("sticky"); $("#pathwayFontsSubs").addClass("pathwayFontsSubs"); } else { $("#pathwayFonts").removeClass("sticky"); $("#pathwayFontsSubs").removeClass("pathwayFontsSubs"); } if (($(window).scrollTop() + $(window).height()) < ($("body").height() - $("#footer").outerHeight())) { $("#fixedBottom").addClass("sticky-footer"); $("#fixedBottomSubs").addClass("fixedBottomSubs"); } else { $("#fixedBottom").removeClass("sticky-footer"); $("#fixedBottomSubs").removeClass("fixedBottomSubs"); } });

Пояснения к коду:
блоки #pathwayFontsSubs и #fixedBottomSubs нужны для того, чтобы когда элементы #pathwayFonts и #fixedBottom находятся в позиции fixed высота документа оставалась постоянной и в момент перехода фиксед-нефиксед страница не дёргалась. Как видим, классы .sticky-footer и .fixedBottomSubs сразу присвоены нижним элементам, поскольку нижний блок сразу находится в позиции фиксед.
добавка css:
.sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; } .sticky-footer { position: fixed; width: 100%; left: 0; bottom: 0; z-index: 100; }

Answer 1 · 2014-03-05 12:57:54

sergealmazov @sergealmazov

Подписываетесь на событие $(window).scroll(function() {});

В функции и пишете свои условия.

Ответ написан более трёх лет назад

2 комментария

Как присвоить/убрать position: fixed; при скроллинге?

Войдите на сайт