Полноэкранный заголовок с липкой навигацией

Question

Одна вещь, которая определенно сейчас имеет тенденцию, это полноэкранные заголовки с липкой навигацией, готовой к работе с заголовком или отображаемой при прокрутке мимо заголовка. Я хотел бы знать, что они достигли этого на этом сайте... http://demo.tardigradestudio.com/themes/keylight/. Это то, что я хотел бы включить в сайт, который я проектирую. Спасибо!

Answer 1

Довольно простая вот моя скрипка: http://jsfiddle.net/hgpd8/4/

Вы определяете положение прокрутки окна и, если оно больше, чем положение заголовка, тогда устанавливаете заголовок как фиксированный. Или просто исправьте это с помощью CSS с самого начала, но это не так круто.

некоторые добавленные эффекты, но работающие:

if ($("#header").is('*')) {
var elem = $('#header');
var offset = elem.offset();
var leftValue = offset.left;
var topValue =  offset.top + elem.height();
var width = elem.width();
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= topValue) {  
 if ($('#header').hasClass('fixed')){    
 }else{
    $('#header').addClass('fixed');
    $('#header').css({
        top: '-60px',
        width:width,
    });
     $('#header').animate({ 
    top: '0',
}, 500, function() {    
        });
}
} else {    
if ($('#header').hasClass('fixed')){        
$('#header').removeClass('fixed');
$('#header').fadeOut('fast', function(){ 
 $('#header').fadeIn('fast');
});
    }
    }
  });
}

Answer 2

Это делается с помощью комбинации JavaScript и CSS. Javascript установит навигацию в position: fixed; как только он достигнет вершины области просмотра. Просто используйте ваш браузер инспектор и смотреть и учиться...

Вам действительно нужно придумать какой-то собственный код и сообщить нам, где именно вы застряли, если вы хотите получить реальный ответ. Или, может быть, поиск в Google для учебника будет хорошей идеей...

Answer 3

Вы можете сделать это с помощью CSS. Есть так много ссылок, которые помогут вам сделать это.

Я рекомендую прочитать это: http://tympanus.net/codrops/2013/06/06/on-scroll-animated-header/

один из лучших учебников о том, чего вы хотите достичь. Демо здесь: http://tympanus.net/Blueprints/AnimatedHeader/

Если вам нужны дальнейшие объяснения, вот несколько других ссылок: Вот несколько:

Исправлен заголовок в CSS для условной прокрутки вниз?

http://css-tricks.com/persistent-headers/