Question

我在主容器div中有5个div，每个div在另一个下面。每个div都有不同的高度（例如，第一个具有height: 300px;，第二个具有height: 400px;等等。这些div中的每一个还具有黑色/白色的替代背景颜色。

我有一个标识，一个变体是白色，另一个是黑色，我想在页面滚动时固定位置（黑色div上的白色标志和白色div上的黑色标志）。

在我的代码中，我在左上角放置了一个黑色徽标。现在我的问题从这里开始。当我滚动页面时，黑色div上看不到黑色徽标，当我有白色div和白色徽标时会发生同样的情况。

我希望黑色div显示白色徽标，白色div在页面滚动时显示黑色徽标。该职位应该是固定的。

这是我的HTML：

<div class="wrapper">
    <img src="whiteLogo.png" style="position:fixed">
    <div class="first" style="background-color:#000"></div>
    <div class="second" style="background-color:#FFF"></div>
    <div class="thiree" style="background-color:#000"></div>
    <div class="four" style="background-color:#FFF"></div>
    <div class="five" style="background-color:#000"></div>
</div>

我创建了一个JSfiddle：http://jsfiddle.net/ketan156/KqWQg/1/

Answer 1

尝试使用简单的CSS解决方案，并根据需要修复它们。

<强> HTML：

<div class="wrapper">
  <div class="first black" style="height:300px;"></div>
  <div class="second white" style="height:400px;"></div>
  <div class="thiree black" style="height:500px;"></div>
  <div class="four white" style="height:300px;"></div>
  <div class="five black" style="height:200px;"></div>
</div>

CSS： [抱歉图像尺寸不匹配，我想您可以自己处理。]

.black{
    background:#000 url(path/to/myWhiteLogo.png) no-repeat 10px 0px fixed;
}
.white{
    background:#FFF url(path/to/myBlackLogo.png) no-repeat 10px 0px fixed;
}

JSFiddle here

注意：我使用OP建议的一些随机DIV大小。此外，使用小图像而不是加载大图像并调整大小，它将节省带宽和加载时间。

Answer 2

这可能是一种方式：

CSS

.black_logo {
    background: url(Black-Logo-PNG.jpg) no-repeat top left;
    background-size: 50px
}

.white_logo {
    background: url(White-Logo-PNG.jpg) no-repeat top left;
    background-size: 50px
}

HTML

<div class="wrapper">
    <div class="first black_logo" style="background-color:#000; height:100px;"></div>
    <div class="second white_logo" style="background-color:#FFF; height:100px;"></div>
    <div class="thiree black_logo" style="background-color:#000; height:100px;"></div>
    <div class="four white_logo" style="background-color:#FFF; height:100px;"></div>
    <div class="five black_logo" style="background-color:#000; height:100px;"></div>
</div>

注意：最好将徽标的大小调整为50px，而不是使用background-size: 50px调整大型徽标的大小

Answer 3

一种解决方案，它不是您所追求的理想解决方案，但它会使两个背景上的徽标可见，例如在Photoshop中为徽标图像添加纯白色笔划。或者，如果您愿意，可以在徽标的白色版本中添加黑色笔划。

在我的html页面的每个div中更改徽标

3 个答案: