Архив метки: фиксированный хэдер

Как создать фиксированный заголовок при прокрутке Для удобства работы с сайтом часто разработчики используют фиксированную шапку сайта. Как сделать липки заголовок? достаточно просто, рассмотрим на примере: Шаг 1) добавить HTML: Пример <div class=»header» id=»myHeader»> <h2>My Header</h2> </div> Шаг 2) добавить CSS: Пример /* Style the header */ .header { padding: 10px 16px; background: #555; color: #f1f1f1; }/* Page content */ .content { padding: 16px; } /* The sticky class is added to the header with JS when it reaches its scroll position */ .sticky { position: fixed; top: 0; width: 100% } /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */ .sticky + .content { padding-top: 102px; } Шаг 3) добавить JavaScript: Пример // 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; //… Читать далее »