Липкий заголовок прыгает во время прокрутки

Question

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

У меня липкий заголовок, который делает скачок при движении, и я не могу найти решение.

Я оставляю код:

HTML

<header class="container-fluid" id="myHeader">

    <div class="container">

        <div class="row" id="encabezado">

        <!--Here is a button that makes SlideToggle and shows content. Important to know so that elements do not overlap when you scroll and click on the button-->

        </div>

    </div>

</header>

JS:

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

CSS:

.sticky {

    -webkit-box-shadow: 0 6px 6px -6px #222;
    -moz-box-shadow: 0 6px 6px -6px #222;
    box-shadow: 0 6px 6px -6px #222;
    position: fixed;
    top: 0px;
    width: 100%;

}

Answer 1

Логика проста: когда ваша навигация становится «фиксированной», ее высота вычитается из высоты вашего основного контейнера, вызывая уменьшение размера.

Например, допустим, ваша навигационная панель имеет высоту 100 пикселей. Если ваша панель навигации получает класс .sticky, ваш контент теряет эти 100px, вызывая скачок, который вы чувствуете.

Чтобы избежать этого, вам нужно, в то же время, когда вы присваиваете nav класс привязки, вы должны присвоить своей области контента класс с padding-top: 100px, например, таким образом, количество места ' забрали », и, следовательно, ощутимого скачка не ощущается.

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

ОБНОВЛЕНИЕ: ОБРАЗЕЦ КОДА

По предоставленной вами информации, которая является частичным образцом вашего кода, неясно, какой элемент вы используете для остальной части вашего контента (не считая заголовка), я буду считать, что этот элемент представляет собой контент с классом = " "and id =" myContent "

CSS

.content.top-padding { padding-top: 100px; }

JAVASCRIPT

// When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()}; // Get the header var header = document.getElementById("myHeader"); // Get the content area var content = document.getElementById("myContent"); // Get the offset position of the navbar var sticky = header.offsetTop; // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset > sticky) { // here you add sticky -> also add top padding header.classList.add("sticky"); header.classList.add("top-padding"); } else { // here you remove sticky -> also remove top padding header.classList.remove("sticky"); header.classList.remove("top-padding"); } }