Исправлено преобразование заголовка при прокрутке страницы

Question

Я не могу в жизни представить свою фигуру. Кто-нибудь знает, как этот эффект прокрутки создается на этом веб-сайте? - http://blindbarber.com/news

Я работаю над проектом, в котором этот эффект очень поможет, так что моя фиксированная навигация не слишком велика при прокрутке.

Заранее спасибо.

Answer 1

Заголовок остается на вершине с помощью CSS position:fixed .. или вы можете установить CSS заголовка - position:fixed с самого начала или изменить его на position:fixed, как только он начинает прокрутку страницы .. и обновить заголовок содержимого вы хочешь сохранить, как он прокручивает ..

// css 
.container { 
    height: 2000px; 
    width: 100%; 
    background-color: yellow; 
} 

.header { 
    text-align: center; 
    background-color: red; 
    height: 100px; 
    min-height: 50px; 
    width: 100%; 
} 

// js 

window.onscroll= function() { 
    var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; 
    var header = document.getElementById("header"); 
    if (top > 50){ 
    header.style.position = "fixed"; 
    header.style.height = "50px"; 
    } else { 
    header.style.position = "relative"; 
    header.style.height = "100px"; 
    } 
} 

//html 
<div class="container"> 
    <div id="header" class="header"> 
    Hello World 
    </div> 
</div> 

Demo here

Answer 2

Это то, что ищу я думаю:

http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

Таким образом, условия поиска Google, которые дают вам ответ, являются «отзывчивым меню» + javascript.

В моем случае я искал плагин jquery, поэтому добавил в jQuery. Я не нашел многого использования «трансформации с фиксированным заголовком»

:)