Как можно сделать меню так чтоб она прилипла при прокрутке только с JS?

Question

[Alex ALex]

Хотел бы еще спросить у вас если я сделаю меню так как хочу прилипающее к верхнему экрану то как быть с
контейнером контента? width 100% задать или? или все таки оставить отступ с верху столько столько задал в меню ? Вот тут как то не понятно и еще если меню прилипает z -index нужно задать или нет?

Answer 1

[Юпитер Макс]

var $navFix = $(".navigation");
	
	$(window).scroll(function(){
		if ( $(this).scrollTop() > 120){ // 120 это высота прокрутки
			$navFix.addClass("fixed");
		} else if($(this).scrollTop() <= 120) {
			$navFix.removeClass("fixed");
		}
	});

соответственно, когда у меню добавляется класс fixed, прописываешь нужные стили. Для основного контейнера можно тоже добавить класс и менять стили

Comments

[Alex ALex]

Я так и не смог можете показать тут codepen?

[Юпитер Макс]

Alex ALex, вам надо чтобы при скролле прилипало или сразу было прилеплено?

[Alex ALex]

Юпитер Макс, Хотел бы она была уже прилеплино но если покажите обе варианта буду рад и огромное спасибо вам как не как может понадобятся мне и тот вариант))

[Юпитер Макс]

Alex ALex, вот вариант сразу с фиксированным меню https://jsfiddle.net/dt2uxce0/1/

[Юпитер Макс]

Alex ALex, ну а это фиксируется после определенной высоты. в данном случае 220px https://jsfiddle.net/796dmn8v/

[Alex ALex]

Юпитер Макс, Огромное спасибо вам)) У вас есть вк хотел бы кое что еще спросить у вас..

[Юпитер Макс]

Alex ALex, пишите на почту, в моем профиле есть адрес

[Alex ALex]

Юпитер Макс, Ок))

[Alex ALex]

Юпитер Макс, А как это можно реализовать c Js? Код который вы наверху мне написали и я отметил решением.. Как то этого кода я не смог использовать Заранее СПАСИБО.

Answer 2

[iBird Rose]

К примеру делаешь такую структуру:

<div class="navbar">
	<div class="container">
		111
	</div>
</div>

и фиксируешь .navbar
т.е. задавая ему width: 100%; контейнер внутри также останется как был.

z -index да. нужно, если не хочешь чтобы твое меню при прокрутке потом уходило на задний план на каком-то элементе страницы

Comments

[Alex ALex]

У меня к вам вопрос такой если сделаю так как вы сказали а блок к контейнеру задать высоту 100% или не надо?

[iBird Rose]

Alex ALex, зачем?

[Alex ALex]

Как вы думайте что вы посоветуйте с js реализовать или так как вы привели пример?

[Alex ALex]

iBird Rose, ну как вам сказать хочу сделать fullpage + что бы меню прилипала.. с верху при скроле верх и вниз.

Answer 3

[Виталий Инчин ☢]

Сейчас есть классный position: sticky;

Comments

[Alex ALex]

А с Flex и c Grid можно использовать этоn position: sticky? b можете показать как это сделать?

[Сергей Горячев]

Alex ALex, а какая может быть проблема с флексами и гридами? можно, это позиционирование, никак не связано с сеткой.

[Alex ALex]

Сергей Горячев, А мне кто тут сказал что позиционировать нельзя ну то есть абсолютное позиционирования когда я делал меню.

[Виталий Инчин ☢]

Alex ALex, проблем не должно быть, если все учесть. Накидайте пример на jsfiddle или codepen, я покажу как закрепить блок при прокрутке.

[Alex ALex]

Виталий Инчин ☢, Тут у меня с ошибьками но вот типо так начинаю свой первый сайт))
https://codepen.io/P-RO-ME-TEY/pen/Kboorj