Firefox - функция закрепления поститона отключается, когда включена прокрутка

Question

Я работаю над одностраничным сайтом.Я пытаюсь сделать липкую панель навигации, которая использует идентификаторы привязки.Все работало нормально, пока я не ввел плавную прокрутку.

Я поместил scroll-поведение: smooth на html selector, и он вылетел из-за липкого поведения в Firefox 65.0.1.Он работает правильно на Chrome.Чтобы изобразить проблему, я создал этот Codepen .Чтобы восстановить проблему, откройте ее в Firefox и попробуйте закомментировать свойство scroll-поведения.

html { scroll-behavior: smooth; }

Я знаю, что могу повторить это с помощью JS, но я стремлюсь к облегченной странице, поэтому мне хотелось бысделать это изначально.Я также знаю, что я могу повторить это с фиксированной позицией, но мне интересно, использовал ли я что-то неправильно или это ошибка в Firefox.

Answer 1

Иногда я использую интересный трюк, я создаю тело как гибкий контейнер, и у него есть 2 контейнера: nav и wrapper, поэтому выглядит, будто страница прокручивается, но на самом деле прокрутка прокручивается, что дает эффект, что nav придерживаетсяверх:

(и да, postition:sticky; имеет очень плохую поддержку, поэтому я не рекомендую его использовать)

body
{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.wrap
{
  scroll-behavior: smooth;
  flex: 1;
  overflow: auto;
}

*
{
margin: 0;
  padding: 0;
}

nav
{
  font-family: sans-serif;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

<nav>
  blahblahblah
  <a href="#title1">sdf</a>
</nav>
<div class="wrap">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta 
  <h1 id="title1">
    hi
  </h1>
  laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus.
</div>