Липкое навигационное меню на чистом JS, как сделать?

Question

[Cal_Lightman]

Как правильно будет выглядеть вариант скрипта на чистом JS?
В интернете много вариантов, но они работают не во всех браузерах и так же не работают с другими скриптами рядом....

Сейчас на JQuery код с разметкой выглядит так:

<nav id="menu" class="default">
<div class="menu_list">
 ...
</div>
</nav>

$(function(){
	var menu = $("#menu");
	$(window).scroll(function(){
		if($(this).scrollTop() > 150 && menu.hasClass("default")){
			menu.removeClass("default").addClass("fixed");
		}
		else if($(this).scrollTop() <= 150 && menu.hasClass("fixed")){
			menu.removeClass("fixed").addClass("default");
		}
	});
});

Answer 1

[Вадим]

document.addEventListener("DOMContentLoaded", onDOMReady);

function onDOMReady() {
  window.addEventListener('scroll', onWindowScroll)

  var menu = document.getElementById('menu');

  function onWindowScroll() {
    if(window.document.scrollingElement.scrollTop > 150){
      menu.classList.add("fixed");
    }
    else { 
      menu.classList.remove("fixed")
    }
  }
}

События загрузки документа
Document.scrollingElement

Comments

[Cal_Lightman]

Что-то у меня не работает.
Видимо я что-то не дописал?

function onDOMReady() {
	window.addEventListener('scroll', onWindowScroll)
}

function onWindowScroll() {
	if(window.document.scrollingElement.scrollTop.scrollTop > 150 && menu.classList.contains("default")){
		menu.classList.remove("default")
		menu.classList.add("fixed");
	}
	else(window.document.scrollingElement.scrollTop.scrollTop <= 150 && menu.classList.contains("fixed")){
		menu.classList.remove("fixed")
		menu.classList.add("default");
	}
}

[Вадим]

Cal_Lightman, обновил ответ, проверьте ещё раз. Я что-то не дописал в первый раз :-)

[Cal_Lightman]

Проверяю, но почему-то не работает.

На квери работает, а на js не хочет.

[Вадим]

Cal_Lightman, Ошибки в консоле?

[Вадим]

Cal_Lightman, у Вас после else круглая скобка, а должна быть фигурная.

[Вадим]

Cal_Lightman, Сделал для Вас демку. Прикрепил к ответу.

[Вадим]

Cal_Lightman, А ещё вопрос, а точно ли Вам нужен JS? Липкое меню давно уже делают через css с помощью position: sticky

[Cal_Lightman]

делаю так и ничего не происходит всё равно.

document.addEventListener("DOMContentLoaded", onDOMReady);

function onDOMReady() {
	window.addEventListener('scroll', onWindowScroll)

	var menu = document.getElementById('menu');

	function onWindowScroll() {
		if(window.document.scrollingElement.scrollTop > 150 && menu.classList.contains("default")){
			menu.classList.remove("default")
			menu.classList.add("fixed");
		}
		else { 
			menu.classList.remove("fixed")
			menu.classList.add("default");
		}
	}
}

через Sticky я сделал сайдбар справа. Когда для просмотра на ПК.
Но в старых браузерах он всё равно не работает.
Не знаю, в чем причина... не понимаю я эти скрипты. Почему-то не срабатывает, не прилипает...

[Вадим]

Cal_Lightman, Посмотрите демку. Я её максимально упростил. Всё работает.
Если у Вас при этом НЕ работает, то нужно сделать следующее:
• Посмотреть в инструментах разработчика, в консоле, что нет ошибок.
• Если ошибки есть, то заняться их исправлением, если нет, то заняться отладкой.
Инструменты разработчика и отладка в Chrome

Самый простой способ отладки это добавить в код console.log во всех нужных местах. После чего открыть сайт, инструменты разработчика и начать прокручивать страницу, смотря в консоль.
В нашем случае, скажем, это будет так:

document.addEventListener("DOMContentLoaded", onDOMReady);

function onDOMReady() {
  console.log('1) onDOMReady')
  window.addEventListener('scroll', onWindowScroll)

  var menu = document.getElementById('menu');

  function onWindowScroll() {
    console.log('2) onWindowScroll')
    if(window.document.scrollingElement.scrollTop > 150){
      console.log('3) onWindowScroll - fixed')
      menu.classList.add("fixed");
    }
    else { 
      console.log('4) onWindowScroll - remove fixed')
      menu.classList.remove("fixed")
    }
  }
}

[Cal_Lightman]

Вадим,
сейчас буду разбираться....

[Cal_Lightman]

Вадим,

[Вадим]

Cal_Lightman, А Вы jquery отключили?

[Cal_Lightman]

Нет, у меня jquery и скрипты которые через нее работают - в 1 файле лежат.
А второй файл скрипта - там на js.

[Вадим]

Cal_Lightman, Ну вот, судя по скрину, у Вас 3 ошибки. Только немного странный у них call stack.
Нажимая справа на названия файлов (bundle.js) откроется файл, где эта ошибка возникает. Проверьте, Ваш ли это код.

[Вадим]

Cal_Lightman, а ещё call stack намекает что какая-то проблема в расширениях браузера. Попробуйте все отключить и перезагрузить страницу

[Cal_Lightman]

Вадим,
наверно какие-то дополнения в мозиле...? У меня 2 блокировщика рекламы включены, Каспер, и закладки от Яндекса.
Сейчас установил Хром, в нем ошибок не выдает....
Не показывает с разделе Console.
Попробовал скрипт - тоже не прилипает меню....

[Вадим]

Cal_Lightman, а на демке, из ответа прилипает?

[Cal_Lightman]

Вадим,
Да. И в Мозиле и в хроме работает.
Беру скрипт ставлю себе - не прилипает ни там ни там.
стили такие же... даже высота такая же меню.

[Вадим]

Cal_Lightman, ну значит только отладка Вам в помощь. У Вас где-то проблема в другом месте

[Cal_Lightman]

Вадим,
Конфликтует скрипт с библиотекой Flickity и baguetteBox.
Вынес Ваш скрипт в отдельный файл - заработал. (или если библиотеки удаляю тоже работает)
Но в ie 11 не работает всё равно.

[Вадим]

Cal_Lightman, Да, в IE не поддерживается свойство scrollingELement.
Можно тогда заменить window.document.scrollingElement на переменную, в которой сохранён тэг html.
Типа так:

document.addEventListener("DOMContentLoaded", onDOMReady);

function onDOMReady() {
  window.addEventListener('scroll', onWindowScroll)

  var menu = document.getElementById('menu')
  var scrollingElement = document.querySelector('html')

  function onWindowScroll() {
    if(scrollingElement.scrollTop > 150){
      menu.classList.add("fixed");
    }
    else { 
      menu.classList.remove("fixed")
    }
  }
}

Answer 2

[sharpsss]

Если что добавляйте в css

.fixed{
position:fixed}

и всё ок будет работать
если кому помог мой коммент с вас лик)