Я создаю липкий заголовок с помощью путевых точек в этом руководстве http://www.webtutorialplus.com/sticky-header-on-scroll-jquery/
Но как мне создать заголовок, который «меняет местами»?
Пример: если вы посетите http://www.hongkiat.com/blog/ и прокрутите заголовок вниз который прокручивается, на самом деле не является элементом, который изначально виден на странице.
Это то, что вы ищете?
$('.showafterthis').waypoint(function() {
if ($(".header2").is(":hidden")) {
$(".header2").slideDown(100);
} else {
$(".header2").slideUp(100);
}
});
На самом деле это два отдельных навигатора. бары.
Я бы создал еще один и скрыл его при загрузке, переместив его за верхнюю часть экрана. Поместите его вне любого внутреннего html с относительной позицией, конечно.
<div id="nav2">Your links and jazz</div>
и в CSS:
#nav2 { style:your; bar:!; }
.sticky-wrapper { position:absolute; top:-50px; }
Липкая линия обертки очень важна. Это div вокруг панели навигации, и это строка, которая получает позиционирование, а НЕ строка nav2.
Для вашего javascript:
$('#nav2').waypoint('sticky', {
offset: -300 // how far from top
});
Вы можете повозиться со смещением, чтобы получить его там, где вы хотите.
Удачи!
