Исправить заголовок на основе прокрутки 100% высоты

Question

Так что в настоящее время у меня есть фиксированный заголовок, работающий с прокруткой, однако у меня есть установленная высота в jQuery для размера заголовка. Теперь высота этого заголовка может варьироваться, поэтому, вместо того чтобы делать это на прокрутке, скажем, 105px, как я могу сделать это на прокрутке на 100% высоты? Из-за того, что заголовок может измениться, текущий код приведет к тому, что фиксированный заголовок не будет работать так же гладко на страницах определенных клиентов.

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

Так что этот код работает так, как указано. Проблема в том, что он установлен на «105». Мне нужно это изменить в зависимости от размера заголовка. Вместо того, чтобы постоянно устанавливать определенный размер.

Answer 1

Вы должны получить эту header высоту.

Допустим, что header это

<header>stuff</header>

в JS

const header = $("header");

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

Подробнее о element.height(); здесь