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

Question

[Anton Dyshkant]

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

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

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

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

Comments

[Anton Dyshkant]

$(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]

Итого, работающий вариант такой:
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]

добавка 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

[Юрий Лобанов]

В общем виде советую решение следующее:

$(window).scroll(function(){
        if ($(window).scrollTop() > 400) {
            $('.header').addClass('header-fixed');
        }
        else {
            $('.header').removeClass('header-fixed');
        }
    });

Аналогично и для других элементов. Естественно, условия прописывайте сами. Ну и соответствующим образом прописывайте классы.
Для того, чтобы Вам помогли прописать конкретно для Вашего примера - нужна Ваша разметка и условия фиксации блоков.

Comments

[Anton Dyshkant]

@iiil а без "400" нельзя обойтись?

[Юрий Лобанов]

@vyshkant я же написал - пишите свои условия - это лишь пример. Конечно можно по другому, взять вместо 400 переменную offset и данную переменную определять перед этим, например она будет равно высоте какого-нибудь блока.
Это лишь общий случай, то есть я показал, что хорошим решением будет использование scroll и добавление или удаление классов. В классах Вы можете писать что хотите, и присваивать классы многим элементам. Можно сделать несколько условий, все, что захотите. Использование сторонних решений я не поддерживаю. Одно дело использовать готовую функцию в фреймворке, как в твиттер бутстрап, другое дело, если такой функции не встроено - то написать ее очень просто.

[Anton Dyshkant]

@iiil а как быть с нижним блоком? if ( ($(window).height() - $('#footer').height()) > .scrollTop() ) - то присваиваем класс?

[Юрий Лобанов]

@vyshkant Вы просто вынуждаете умолять Вас выложить код ) Или хотите чтобы я сам разметку написал?

[Anton Dyshkant]

@iiil у меня получается что-то такое:
$(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]

@iiil эмм прикрепил получившийся код к вопросу

[Anton Dyshkant]

@iiil обновил и прикрепил работающий код

[Юрий Лобанов]

@vyshkant ну и хорошо ) на будущее - сразу делайте пример на http://jsfidle.net, разметку и стили. То, что Вы описываете словами - достаточно трудно и Вам, и другим. Код - универсальный язык. Уверен, что добились бы результата быстрее. Зато взяв за основу мой пример (а также примеры других отвечающих) - Вы сами сделали и разобрались, что бесценно )

[Anton Dyshkant]

@iiil учту, спасибо за помощь :)

Answer 2

[Александр Плаксенко]

Описать условия скроллинга сможете?
Верхнее меню
//Условие
$('nav').css('position', 'fixed');
//Условие при обратном скролле
$('nav').css('position', '');

Вот готовый пример: demo.hongkiat.com/css-sticky-position/index2.html

Comments

[Anton Dyshkant]

@TrustInside подскажите, как из вашего готового примера сделать штуку с нижним блоком?

[Александр Плаксенко]

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

Оберните футер с этим элементом в один блок.
Сделайте ему position: relative;
когда скролится - добавляйте нижней части класс с position: absolute; top:0; а футеру отступ равный высоте блока, который надо пднять.

[Александр Плаксенко]

blog.gaijindesign.com/jquery-making-sure-your-foot...
Вот примерно так.

Answer 3

[sergealmazov]

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

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

Comments

[Anton Dyshkant]

@sergealmazov извините, но мне не очень понятно, о чем речь

[sergealmazov]

Узнайте. что такое события, как подписываться на события в jQuery. Почитайте про scrollTop(), про offset, про объекты document и window.

Лучше один раз со всем этим разобраться и все будет в порядке.