Sticky Header on scroll

Question

В настоящее время я проектирую новый веб-сайт и обладаю 100% -ным отзывчивым расположением, шириной и высотой.

У меня есть заголовок, который находится 0px в нижней части экрана. Пропустив прокрутку, я хотел бы, чтобы заголовок получил класс «липкий», который затем помещает заголовок в верхней части страницы в фиксированном формате.

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

У кого-нибудь есть правильный код для меня, чтобы использовать мой заголовок в верхней части экрана после прокрутки вниз.

Я добавил изображение, чтобы его объяснить. Спасибо.

Мой текущий код JQuery является:

$(window).scroll(function() { 
    if ($(window).scrollTop() > $(window).height()) { 
     $('header').removeClass('sticky'); 
    } else { 
     $('header').addClass('sticky'); 
    } 
}); 

Однако это не шов, чтобы работать.

Answer 1

Для вашего CSS попробовать это:

.sticky { 
    position: fixed; 
    top: 0px; 
} 

Это будет держать заголовок застрял в верхней части экрана. В качестве альтернативы вы можете просто дать заголовок position: sticky; (https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning), но поддержка браузера будет довольно ограничена (http://caniuse.com/#feat=css-sticky).

Answer 2

Помогите? JQuery Position:Fixed 'NAVBAR' by scrolling the page на этой странице есть демонстрация тоже, найдите заметный ответ.

Вы также можете попробовать этот плагин, который я написал давно Simple-Sticky-Top-Navbar. Это время, пока я не обновляю его, но эй, вы всегда можете его разветвить и настроить так, как вам нравится :)