Question

我正在建立一个结构简单的整页网站。

<body>
<div class="menu">
    <li><a href="#01">First</a></li>
    <li><a href="#02">Second</a></li>
    <li><a href="#03">Third</a></li>
</div>
<div id="fullpage">
    <div id="01" class="dark">Lorem ipsum</div>
    <div id="02" class="light">Lorem ipsum</div>
    <div id="03" class="dark">Lorem ipsum</div>
</div>
</body>


.menu{position: fixed; width:100%; color:white;}
.dark{background-color:black;}
.light{background-color:white;}

我的三页中的每一页都是100％的高度和宽度，我正在使用fullpage.js插件进行滚动。我的#menu元素是固定的，因此不会随着滚动而移动。我想根据背景页面更改菜单的颜色，以使文本始终可见。

我可以使用jquery来检查活动页面并更改菜单颜色，但是我想像遮罩一样进行操作。如果向下滚动以在菜单的两页之间放置分隔线，则希望菜单在白色上为黑色，在黑色上为白色。我想做的是仅在固定div上方的其他div处更改其颜色。

我很努力地制作一种带有一个白色菜单和一个黑色菜单的剪贴蒙版，但我不知道该怎么做。

编辑：由于我的帖子不清楚我要做什么，所以我做了gif解释。在这里，想像一下，圆圈是我的固定菜单，背景是我的差异页面。当我移动滚动位置时，我们可以看到正在显示不同的颜色。如果我们在中间停止滚动，则圆圈在白色处为黑色，在黑色处为白色。 gif here

当固定div高于另一个

0 个答案: