विशिष्ट 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> 

सीएसएस:

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

मैं जोड़ने/(fixed-red/green/blue divs को red/green/blue-active वर्ग को दूर उपयोगकर्ता/बंद red, green, या blue divs पर तब होता है जब करना चाहते हैं जब वे दिखाई दे रहे हैं), तो छोटे divs क्रमशः बड़े रंग के रंग के साथ हाइलाइट किया जाएगा, जब उपयोगकर्ता उनके ऊपर होता है तो डिस्प्ले डिव।

धन्यवाद!

Answer 1

मुझे कोड को थोड़ा छोटा करना था ताकि कोड अधिक डीआरआर हो सके। कक्षाएं अब 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>

यहाँ कि

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