jquery - 固定ナビゲーション付きの全画面ヘッダー

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;、ビューポートの上部に到達するとすぐにナビゲーションを設定します。ブラウザのインス​​ペクターを使用して、見て学ぶだけです...

独自のコードを考え出す必要があり、本当の答えが必要な場合は、行き詰まっている場所を正確に教えてください. または、チュートリアルをグーグルで検索するのも良い考えです...