Я создал липкую панель навигации с помощью плагина Bootstrap Affix. Панель навигации находится под заголовком. При прокрутке страницы вниз, как только навигация достигает верха, она остается там. Работает нормально, пока все хорошо.
Однако что-то не работает, как я хочу. В тот момент, когда навигационная панель достигает вершины, ее положение меняется со «статического» на «фиксированное» (по понятным причинам). Следствием этого является то, что содержимое страницы под навигацией больше не может «видеть» панель навигации от одного прокручиваемого пикселя к другому. (Будучи фиксированным, он перемещается за пределы потока). Таким образом, с одного момента на другой содержимое страницы больше не видит нижнее поле навигации и принимает заголовок в качестве предшествующего элемента.
Следствием этого является то, что содержимое страницы внезапно пропускает несколько строк пикселей (количество, равное нижнему полю навигации) и делает «скачок».
См. скриншоты ниже: один прямо перед тем, как навигация достигает вершины (все еще статическая), и один сразу после того, как она достигла вершины (исправлено).
В целом я нахожу это очень понятным, CSS работает так, как и ожидалось. Однако это не то, что я хочу. Я хочу, чтобы содержимое страницы следовало нормальному движению прокрутки и не прыгало на некоторое расстояние.
Как я могу это изменить?
Заголовок
<body>
<header class="header container">
<h1>Header</h1>
<h2>Tagline</h2>
<img src="http://lorempixel.com/300/200" />
</header>
<nav id="main-navigation" class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#products">Products</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<section id="about">
<h2>About</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at velit eu leo semper pharetra vitae sed nisl. In elementum neque in urna elementum tristique. Sed malesuada risus justo, ut pellentesque enim vehicula vitae. Quisque a nunc et ligula sagittis ullamcorper. Proin eu faucibus eros, id iaculis felis. Praesent vitae dolor a quam accumsan egestas sit amet et sapien. Praesent tincidunt quam id vestibulum sollicitudin. Ut eget sem a diam tempus tempor. </p>
<p>In elementum neque in urna elementum tristique. Sed malesuada risus justo, ut pellentesque enim vehicula vitae. Quisque a nunc et ligula sagittis ullamcorper. Proin eu faucibus eros, id iaculis felis. Praesent vitae dolor a quam accumsan egestas</p>
<p>Nunc tempus egestas massa id cursus. Integer vehicula enim et lacus suscipit, at posuere ante ullamcorper. Mauris condimentum eros in luctus blandit. Nam at nibh dignissim libero dictum lacinia lacinia et neque. In viverra lorem id nulla aliquam, vel laoreet est porttitor. Sed congue tincidunt arcu eget cursus.<br />Quisque aliquam laoreet quam et maximus. Pellentesque maximus ullamcorper ante, a elementum est dapibus at. Nulla feugiat leo sed turpis convallis suscipit vel dictum sapien. Vivamus luctus id nulla sit amet fermentum. Praesent sodales viverra enim ut malesuada. Ut in elit bibendum, mollis dui nec, faucibus enim. Vivamus ullamcorper sed augue at lacinia.</p>
</section>
<section id="products">
<h2>Products</h2>
<p> Nunc mattis mauris quis diam dictum, non tristique diam congue. Vestibulum tincidunt augue a dui interdum facilisis. Donec sed neque id nunc ullamcorper porta quis vitae nibh. Quisque aliquam laoreet quam et maximus. Pellentesque maximus ullamcorper ante, a elementum est dapibus at. Nulla feugiat leo sed turpis convallis suscipit vel dictum sapien. Vivamus luctus id nulla sit amet fermentum. Praesent sodales viverra enim ut malesuada. Ut in elit bibendum, mollis dui nec, faucibus enim. Vivamus ullamcorper sed augue at lacinia. Nunc tempus egestas massa id cursus. Integer vehicula enim et lacus suscipit, at posuere ante ullamcorper. Mauris condimentum eros in luctus blandit. Nam at nibh dignissim libero dictum lacinia lacinia et neque. In viverra lorem id nulla aliquam, vel laoreet est porttitor. Sed congue tincidunt arcu eget cursus.<br />Quisque aliquam laoreet quam et maximus. Pellentesque maximus ullamcorper ante, a elementum est dapibus at. Nulla feugiat leo sed turpis convallis suscipit vel dictum sapien. Vivamus luctus id nulla sit amet fermentum. Praesent sodales viverra enim ut malesuada. Ut in elit bibendum, mollis dui nec, faucibus enim. Vivamus ullamcorper sed augue at lacinia. Nunc tempus egestas massa id cursus. Integer vehicula enim et lacus suscipit, at posuere ante ullamcorper. Mauris condimentum eros in luctus blandit.</p>
<p>Curabitur posuere ornare enim. Nullam scelerisque vulputate risus, id consequat odio auctor interdum. Etiam eu ligula ut neque semper aliquam ut eget augue. Fusce in volutpat velit, sit amet gravida ipsum. Sed a consectetur nunc. Sed molestie scelerisque nunc nec pellentesque. Aliquam eget malesuada nulla, ut lobortis est.</p>
</section>
</div><!-- /.container -->
</body>
</html>
CSS
@import url("bootstrap/css/bootstrap.min.css");
nav#main-navigation.navbar {
border-radius: 0;
border: 0;
}
nav.affix {
position: fixed;
top: 0;
left: 0;
right: 0;
transform: translate3d(0px, 0px, 0px);
z-index: 1030;
width: 100%;
