特定のdivが表示されているときの色の変更

Question

どうすれば最も正しい方法でこれを行うことができますか教えてください。

HTML：

<div id="fixed-red" class="fixed-red"></div> 
<div id="fixed-green" class="fixed-green"></div> 
<div id="fixed-blue" class="fixed-blue"></div> 
<div id="red" class="red"></div> 
<div id="green" class="green"></div> 
<div id="blue" class="blue"></div> 

CSS：私は追加/ユーザーはオン/オフred、​​、またはblue divの上にあるとき（fixed-red/green/blueのdiv要素にred/green/blue-activeクラスを削除する

html,body{ 
    height:100%; 
} 
.fixed-red,.fixed-green,.fixed-blue{ 
    width:30px; 
    height:30px; 
    position:fixed; 
    top:10px; 
    left:10px; 
    background:#333; 
} 
.fixed-green{ 
    top:50px; 
} 
.fixed-blue{ 
    top:90px; 
} 
.red-active{ 
    background:#f00; 
} 
.green-active{ 
    background:#0f0; 
} 
.blue-active{ 
    background:#00f; 
} 
.red,.green,.blue{ 
    width:100%; 
    height:100%; 
} 
.red{ 
    background:#900; 
} 
.green{ 
    background:#090; 
} 
.blue{ 
    background:#009; 
} 

表示されているとき）、小さいdivは、ユーザーが表示されているときに大きなdivの色でそれぞれ強調表示されます。

ありがとうございます！

Answer 1

コードを少し微調整して、コードがより多くのD.R.Y. クラスはcolorクラスに置き換えられました。ここで

$.fn.isInViewport = function() { 
 
    var elementTop = $(this).offset().top; 
 
    var elementBottom = elementTop + $(this).outerHeight(); 
 

 
    var viewportTop = $(window).scrollTop(); 
 
    var viewportBottom = viewportTop + $(window).height(); 
 

 
    return elementBottom > viewportTop && elementTop < viewportBottom; 
 
}; 
 

 
$(window).on('resize scroll', function() { 
 
    $('.color').each(function() { 
 
     var activeColor = $(this).attr('id'); 
 
    if ($(this).isInViewport()) { 
 
     $('#fixed-' + activeColor).addClass(activeColor + '-active'); 
 
    } else { 
 
     $('#fixed-' + activeColor).removeClass(activeColor + '-active'); 
 
    } 
 
    }); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.fixed-red, 
 
.fixed-green, 
 
.fixed-blue { 
 
    width: 30px; 
 
    height: 30px; 
 
    position: fixed; 
 
    top: 10px; 
 
    left: 10px; 
 
    background: #333; 
 
} 
 

 
.fixed-green { 
 
    top: 50px; 
 
} 
 

 
.fixed-blue { 
 
    top: 90px; 
 
} 
 

 
.red-active { 
 
    background: #f00; 
 
} 
 

 
.green-active { 
 
    background: #0f0; 
 
} 
 

 
.blue-active { 
 
    background: #00f; 
 
} 
 

 
.color { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#red { 
 
    background: #900; 
 
} 
 

 
#green { 
 
    background: #090; 
 
} 
 

 
#blue { 
 
    background: #009; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fixed-red" class="fixed-red red-active"></div> 
 
<div id="fixed-green" class="fixed-green"></div> 
 
<div id="fixed-blue" class="fixed-blue"></div> 
 
<div id="red" class="color"></div> 
 
<div id="green" class="color"></div> 
 
<div id="blue" class="color"></div>

私は `red`、` green`、と `青に、on`の`イベントを追加することを考えたこと

https://jsfiddle.net/BoyWithSilverWings/ds9x55z7/