Question

有类似的代码（简化）：

<style>
.contentblock{
background-color:green;
}
.thereisaproblem{
background-image:url(image.png);
background-attachment:fixed; 
}
.fix{
position:fixed; /* text is centred too if thats important*/
}

</style>
<body>
    <div class="thereisaproblem" id="id1">
    <div class="fix"> Fixed text </div>
    </div> 

    <div class="contentblock">
    Website content 1
    </div>

    <div class="thereisaproblem" id="id3">
    <div class="fix"> Another fixed text </div>
    </div>

    <div class="contentblock">
    Website content 2
    </div>
</body>

我需要“固定文本”仅在ID为1的div中可见，而“另一个固定文本”仅在ID为3的div中可见。当我试图通过位置：固定;文本在两个div中重叠。使用z-index只能防止3在1中可见，反之亦然。总是有一个文本可以在错误的div中看到。有没有任何解决方案可以修复像效果但文本只在一个div中可见？最好只使用html / css，但如果需要jscript / jquery，那就没关系。

有jsfiddle

的链接

基本上，如果你检查jsfiddle，我希望当你向下滚动到另一个div时，在第一个文本的位置可以看到其他文本。您可以忽略固定文本位于纯蓝色div之上的问题。

Answer 1

如果没有为您的固定文字定义实际位置，则始终默认为下一位父级的top: 0; left: 0;拥有position: relative;。定义位置将解决您的重叠问题，但是，您要求根据ID在某些div中输入文本的功能将需要javascript / jquery，甚至是PHP。

Answer 2

现在我明白了。

CSS解决方案

.thereisaproblem{
    position:relative;
}

.fixed{
    position:absolute; // FIXED IS RELATIVE to window 
                       // ABSOLUTE is relative to first positioned parent
}

JAVASCRIPT SOLUTION

我会发布 jQuery ，但这不是必需的，它可以用简单好的旧javascript完成。

所有代码都是如果用户从顶部滚动了100px然后它隐藏了任何具有顶部类的div（在你的情况下是你拥有的＃1），并显示div类底部。否则，它恰恰相反。你必须看到你用来满足你的目的的最佳距离。

$(window).bind('scroll', function() {
 if ($(window).scrollTop() > 100) { 
     $('.top').hide();
     $('.bottom').show();
 }
 else {
     $('.bottom').hide();
     $('.top').show();
 } 
});

关于CSS：

.contentblock{
   position:relative;
   z-index:2;
}
.fixed{
   position:fixed;
   z-index:0:
}
.bottom{
  display:none;
}

注意最初 div（第三个div）如何显示无，以便只有第一个div可见。

<div class="thereisaproblem top" >
  <div class="fixed">
  Fixed text visible in first div
  </div>
</div>

<div class="contentblock">
Website content

</div>

<div class="thereisaproblem bottom">
  <div class="fixed">
  Fixed text visivle in third div
  </div>
</div>
<div class="contentblock">Webs content 2</div>

固定文本仅在一个div内可见

2 个答案: