Как сделать фиксированный header во Vue?

Question

[BUTURUM]

Здраствуйте я новичек в Vue. Всю свою жизнь писал на реакте или нативном JS. Сейчас остро встал вопрос как сделать фиксированный вверху страницы header? В нативном JS я всегда после отрисовки страницы добавлял слить margin-top: [высота header]px; к wapper через скрипт, а самому header задавал через css position: fixed; и таким образом получал страницу где:

• header всегда фиксирован вверху и виден при прокрутке
  
• header и wapper не наслаиваються один на другой
  

как добиться того же самого во Vue если по идее я не могу получить доступ к нативному элементу?

Comments

[alexalexes]

Как насчет position: sticky для header? И зачем тут js в этой задачке?
https://developer.mozilla.org/ru/docs/Web/CSS/position

[BUTURUM]

alexalexes, да это настоящая находка! спасибо!

[BUTURUM]

alexalexes, почему вы не написали это как ответ? никто бы не стал отменять это решение

[alexalexes]

В современной верстке, когда последняя версия Internet Explorer мертва, такое решение очевидно.

Answer 1

[alexalexes]

Вам нужно только свойство position: sticky для header, для этого js не нужен.
https://developer.mozilla.org/ru/docs/Web/CSS/position

Answer 2

[drawnofmymind]

В реакте вроде тоже ref есть.

Comments

[BUTURUM]

так речь про Vue идет