Zmiana koloru, gdy widoczny jest określony element div

Question

Proszę mi powiedzieć, jak mogę to zrobić w najbardziej odpowiedni sposób.

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:

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; 
} 

Chcę dodać/usunąć red/green/blue-active klasę do fixed-red/green/blue div, gdy użytkownik jest on/off red, green lub blue div (gdy są widoczne), więc małe elementy div zostaną odpowiednio podświetlone kolorem dużych, wyświetlanych elementów div, gdy użytkownik znajdzie się na nich.

Dzięki!

Answer 1

Musiałem zmodyfikować kod, aby kod mógł być bardziej D.R.Y. Klasy są teraz zastępowane klasą 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>

Oto skrzypce roboczego tego

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