jQueryを使用して異なる高さでクラスを追加および削除する

Question

jQueryを使用してユーザーが上から異なる距離にあるときにクラスを削除/追加したいとします。

私は正常に処理していますが、うまくいきますが、間違っていると思います。コードを最適化するために助けてください。

htmlは基本的にセクション（ヘッダーを含む）は100％幅です。さまざまな色。最初のセクション（審美的な目的のため）の上にヘッダーの色を変えたい。 また、ページが1ピクセルを超えてスクロールされているときに、影が欲しいと思っています。

私はクラスを追加/削除しています。

big else else if文を使用すると、条件が一致するたびにjsが他の一致をチェックしなくなるため、必要なすべてのクラスが適用されないため、うまく動作しません。

次のコードは動作しますが、私が言ったように、最適ではないと思います。ここ は、HTMLマークアップです：

<header class="dark no-shadow"> 
    Header 
</header> 
<section class="blue"> 
    Please Scroll Down to see the header changes... 
</section> 
<section> 
    The header color Should change when you pass through me. 
</section> 

そしてここでは、jQueryのコードです：（！私のような）

var header = $('header'), 
     blueSection = $('section.blue'), 
    // Calculate when to change the color. 
     offset = blueSection.offset().top + blueSection.height() - header.height(); 

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

    // Remove Class "dark" after scrolling over the dark section 
    if (scroll >= offset) { 
    header.removeClass('dark'); 
    } else { 
    header.addClass('dark'); 
    } 

    // Remove Class "no-shadows" whenever not on the top of the page. 
    if (scroll >= 1) { 
    header.removeClass('no-shadow'); 
    } else { 
    header.addClass('no-shadow'); 
    } 

}); 

そしてjsfiddle使用したい人のために： https://jsfiddle.net/shock/wztdt077/6/

おかげさまで先生！

Answer 1

Here私が作ってみたものです：

var header = $('header'), 
    blueSection = $('section.blue'), 
    // Calculate when to change the color. 
    offset = blueSection.offset().top + blueSection.height() - header.height(); 

var add = function(obj, cls) {obj.addClass(cls);} 
var remove = function(obj, cls) {obj.removeClass(cls);} 

var stylePoints = [offset, 1,   100, 200]; 
var styleTo =  ['dark', 'no-shadow', 'blue', 'tall']; 
var styleType = [add, add,   remove, remove]; 

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    for (i = 0; i < stylePoints.length; i++) { 
    var func = styleType[i]; 
    if (scroll >= stylePoints[i]) 
     (styleType[i] == add) ? remove(header, styleTo[i]) : add(header, styleTo[i]); 
    else func(header, styleTo[i]); 
    } 
}); 

それははるかに長く、あなたの現在のjQuery以上だし、（理論的に）することができますスタイルの変更の数が無限に長い万人を追加することなく、 if/elseステートメント。新しいスタイルの変更を追加するには、3つの配列のそれぞれの末尾に値を追加する必要があります。 stylePointsは、スタイルを追加または削除する値のscrollTop()を指定します。 styleToは、追加または削除するクラスを指定します。 styleTypeは、ユーザがを超えてに対応するstylePointsの値をスクロールしたときに、このクラスを追加するか削除するかを指定します。ユーザーがの下にスクロールしたとき、またはに対応するstylePointsの値をスクロールすると、逆のことが起こります。たとえば、tallクラスが200より上にスクロールされたときにheaderからremove dになり、ユーザーが200にスクロールしたときに追加されることをコードから確認できます。