スティッキーヘッダー - スクロール - CSS/jQuery

Question

スティッキーヘッダーを作成したいと思います。 。

$(function(){ 
    // Check the initial Poistion of the Sticky Header 
    var stickyHeaderTop = $('#sticky').offset().top; 
    $(window).scroll(function(){ 
     if($(window).scrollTop() > stickyHeaderTop) { 
      //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'}); 
      $('#sticky').addClass("sticky"); 
     } else { 
      $('#sticky').removeClass("sticky"); 
     } 
    }); 
}); 

現在のクラスを追加し、ものの「スティッキー」：毎回ダウンユーザーがスクロールし、元のヘッダーが消えていること、そして、「スティッキー」ヘッダーがでキックすべき

を私は現在、この使用しますユーザーがスクロールを行うたびに、元のヘッダーを消さなければならないときはいつでも。

よろしく

Answer 1

id="whateveryouwannacallit"

とセットでdivで彼をラップ：

#whateveryouwannacalltit{ 
position:fixed; 
top:0; 
left: 0; 
width:100%; 
} 

Answer 2

実は、あなたはラッピングを必要としません。ここでは、コード

$(document).ready(function() { 
    var stuck = $('#header'); 
    var start = $(div).offset().top; 
    $.event.add(window, "scroll", function() { 
    var p = $(window).scrollTop(); 
    $(stuck).css('position',((p)>start) ? 'fixed' : 'static'); 
    $(stuck).css('top',((p)>start) ? '0px' : ''); 
    }); 
}); 

---

クレジットは、このページに移行する：http://viralpatel.net/blogs/scroll-fix-header-jquery-facebook/