Выполнить лучше, меню, горизонтальное

Question

let ls = y = st = 0,
  m = [];
document.onscroll = e => {
  y = window.scrollY;
  if (m[0] != 'up' && ls > y)
    m = ['up', y, st];
  else if (m[0] != 'down' && ls < y)
    m = ['down', y, st];

  st = Math.min(Math.max(m[1] + m[2] - y, document.querySelector('header').clientHeight * -1), 0);
  document.querySelector('header').setAttribute('style', "--hm:" + st + "px");
  ls = y;
};

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent
}

header {
  position: sticky;
  top: var(--hm);
  height: 55px;
  background: red;
}

div {
  padding: 30px;
}

<body>
  <header> Menu </header>
  <div>text1</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div>text7</div>
  <div>text8</div>
  <div>text9</div>
  <div>text1</div>
  <div>text2</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
</body>

Сделала, меню. Работает, но на код не взглянуть без слез. Пыталась разобраться в том, возможно ли выполнить данную возможность всплытия меню на стилях. Ничего толком не поняла.

Подскажите, как можно улучшить, выполнить проще. А если на стилях возможно, то вообще супер будет...

Answer 1

Работает, но на код не взглянуть без слез.

Например так будет поприятнее... ;)

let ls = st = 0,
  m = [];
const o = document.querySelector('header')
document.onscroll = e => {
  const y = window.scrollY;
  if (m[0] != 'up' && ls > y)
    m = ['up', y + st];
  else if (m[0] != 'down' && ls < y)
    m = ['down', y + st];
  st = Math.min(Math.max(m[1] - y, -o.clientHeight), 0);
  o.style = `--hm: ${st}px`;
  ls = y;
};

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent
}

header {
  position: sticky;
  top: var(--hm);
  height: 55px;
  background: red;
}

div {
  padding: 30px;
}

<body>
  <header> Menu </header>
  <div>text1</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div>text7</div>
  <div>text8</div>
  <div>text9</div>
  <div>text1</div>
  <div>text2</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
  <div>text3</div>
</body>

БЛОГ НА HUSL

Выполнить лучше, меню, горизонтальное

Ответы (1 шт):