Что нужно изменить, чтобы скрипт работал без jQuery?

Question

[Максим]

jQuery(function ($) {
	'use strict';

	$(window).on('scroll', function () {

		// fixedHeader on scroll
		function fixedHeader() {
			var headerTopBar = $('.top-bar').outerHeight();
			var headerOneTopSpace = $('.header-one .logo-area').outerHeight();

			var headerOneELement = $('.header-one .site-navigation');

			if ($(window).scrollTop() > headerTopBar + headerOneTopSpace) {
				$(headerOneELement).addClass('navbar-fixed');
				$('.header-one').css('margin-bottom', headerOneELement.outerHeight());
			} else {
				$(headerOneELement).removeClass('navbar-fixed');
				$('.header-one').css('margin-bottom', 0);
			}
		}
		fixedHeader();

Answer 1

[Павел]

может так?

document.addEventListener('DOMContentLoaded', function() {
'use strict';

window.addEventListener('scroll', function () {
// fixedHeader on scroll
function fixedHeader() {
  var headerTopBar = document.querySelector('.top-bar').offsetHeight;
  var headerOneTopSpace = document.querySelector('.header-one .logo-area').offsetHeight;

  var headerOneELement = document.querySelector('.header-one .site-navigation');

  if (window.pageYOffset > headerTopBar + headerOneTopSpace) {
    headerOneELement.classList.add('navbar-fixed');
    document.querySelector('.header-one').style.marginBottom = headerOneELement.offsetHeight + 'px';
  } else {
    headerOneELement.classList.remove('navbar-fixed');
    document.querySelector('.header-one').style.marginBottom = '0';
  }
}
fixedHeader();
});
});

Comments

[Максим]

Благодарю за помощь! Добрый человек!

Answer 2

[Adamos]

https://youmightnotneedjquery.com/#on и далее по пунктам