Color change when a certain div is visible

Question

Please tell me how I can do this in the most correct way.

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

I want to add / remove the red/green/blue-active class in the fixed-red/green/blue div when the user turns on the red , green or blue div (when they are visible), so the small divs will be correspondingly highlighted in the color of the large display screen when the user will be on them.

Thanks!

Answer 1

I had to change the code a bit so that the code could be larger than DRY. Now the classes are replaced by the color class.

 $.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> 

Here is a working scenario of this

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