Как сделать прилипание меню к верху при скроле?

Question

[Anto]

Добрый день!

Подскажите как сделать так чтобы при прокрути прилипал блок к верху, а дойдя до футера исчезал.

Answer 1

[one_day]

вот ваше решение с примерами:
shpargalkablog.ru/2013/09/scroll-block.html

Answer 2

[Ростислав Сергеевич]

Есть ЯП под названием JavaScript. Так вот, он обладает абсолютно всеми возможностями, необходимыми для реализации вашей задачи. Может быть вы хотите, чтобы кто-то за вас написал код? - Думаю, вряд ли кто-то станет это делать.

ЗЫ: Почему так сложно загуглить?

UPD: Накидал код:

var navigation = document.querySelector('.nav'); // Инициализируем блок навигации

document.onscroll = function() {
	if (document.scrollTop >= navigation.offsetHeight) { // Если началась прокрутка, то...
		navigation.classList.add('stick'); // Добавляем класс со стилем со свойством position: fixed
		navigation.classList.remove('static'); // Удаляем класс со стилем со свойством position: static
	} else { // Иначе...
		navigation.classList.add('static'); // Добавляем класс со стилем со свойством position: fixed
		navigation.classList.remove('fixed'); // Удаляем класс со стилем со свойством position: static
	};

	if (document.scrollTop == document.body.offsetHeight - document.body.clientHeight) { // Если дошли до низа, то...
		navigation.classList.add('hidden'); // Добавляем класс со стилем со свойством display: none
	} else { // Иначе...
		navigation.classList.remove('hidden'); // Удаляем класс со стилем со свойством display: none
	};
}

Comments

[Anto]

это не то что нужно. Гугл не помог по этому спросил тут!

[Ростислав Сергеевич]

ANTON K.: ну если гугл не помог, тогда давайте я это сделаю:

var navigation = document.querySelector('.nav'); // Инициализируем блок навигации

document.onscroll = function() {
	if (document.scrollTop >= navigation.offsetHeight) { // Если началась прокрутка, то...
		navigation.classList.add('stick'); // Добавляем класс со стилем со свойством position: fixed
		navigation.classList.remove('static'); // Удаляем класс со стилем со свойством position: static
	} else { // Иначе...
		navigation.classList.add('static'); // Добавляем класс со стилем со свойством position: fixed
		navigation.classList.remove('fixed'); // Удаляем класс со стилем со свойством position: static
	};

	if (document.scrollTop == document.body.offsetHeight - document.body.clientHeight) { // Если дошли до низа, то...
		navigation.classList.add('hidden'); // Добавляем класс со стилем со свойством display: none
	} else { // Иначе...
		navigation.classList.remove('hidden'); // Удаляем класс со стилем со свойством display: none
	};
}

Answer 3

[Анатолий]

Гугл никто не отменял.
StickyJS.

Comments

[Anto]

это не то что нужно. Гугл не помог по этому спросил тут!