当特定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：

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

我想添加/当用户开启/关闭red，​​，或blue的div删除red/green/blue-active类的fixed-red/green/blue的div（当它们可见时），所以当用户在其上时，小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>

这里是一个

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