ヘッダーをスライドして固定します

Question

私はここに座って自分の小さなウェブサイトを作成しています。 私の最初のレスポンシブなレイアウトのために、私は200pxのスクロールの後で私のヘッダーをスライドさせて修正したいと思っています。

$(window).scroll(function(){ 
    var header = $('header'), 
     scroll = $(window).scrollTop(); 

    if (scroll >= 200) header.addClass('fixed'); 
    else header.removeClass('fixed'); 
}); 

200pxの後にヘッダを固定する：

私はここにこのコードを持っています。しかし、この解決策は少し難しいです。 あなたが私を助けてくれることを願っています。サポートありがとう。

Answer 1

あなたのヘッダーオブジェクトにクラスを追加することを忘れているかもしれないと思います。あなたは、クラス=「」ヘッダを持つdiv要素を持っている場合は、あなたの変数の宣言は次のようになります。ここでは

var header = $('.header'), 

は、このコードの動作の一例とlink to a jsfiddleです。

Answer 2

これはあなたにスタートを与えるかもしれません。 ブール変数を追加して、クラスの追加/削除回数を制限することに注意してください。

//javascript: 
//Define variables outside the scroll function 
var win = $(window), header = $('header'), isDown = false; 

win.scroll(function(){ 
    //This function fires thousands of times, so limit that 
    scrollpos = win.scrollTop(); 
    if (!isDown && scrollpos >= 200){ 
    header.addClass('fixed'); 
    isDown = true; 
    }else if (isDown && scrollpos < 200) 
    header.removeClass('fixed'); 
    isDown = false; 
    } 
}); //END window.scroll 


<!-- HTML --> 
<!-- Remember to add the jQuery library (just above `</body>` in document) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>