使用javascript库基于动态背景颜色的颜色反转

Question

请查看此JSFIDDLE

div背景随机生成，有时a元素的颜色与背景颜色相同，使a不可见。那么，如何动态反转a背景颜色以确保a永远不会隐藏？

HTML

登录

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
....
....

CSS

div {
    display: block;
    width: 100%;
    height: 200px;
}

a {
    display: inline-block;
    top: 10%;
    left: 50%;
    position: fixed;
    padding: 20px;
    border: 1px solid grey;
}

的Javascript

$('div').each(function() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    $(this).css('background', color);
});

Answer 1

您需要将锚点放在第一个div中。然后每当你滚动时，你必须将它从一个div移动到下一个div。在滚动时，您将检查父div的背景颜色并反转锚的颜色。

$(document).scroll(function(){
//do stuff here
});

Something like this