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

There is a code like that(simplified):

有一个类似的代码(简化):

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

I need "Fixed text" to be visible only in a div with id 1, and "Another fixed text" to be visible only in a div with id 3". When I tried to do it simply by position:fixed; text overlapped in both divs. Using z-index can only prevent 3 from being visible in 1 and vice versa. Always one of texts can be visible in the wrong div. Is there any solution to make fixed like effect but with text visible only in one div? It would be best to use just html/css, but if jscript/jquery is needed then it's ok.

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

there is link to jsfiddle

有链接到jsfiddle

Basicly, if you check the jsfiddle, I want other text to be visible in the place of the first one when you scroll down to another div. You can ignore the problem of fixed text being on top of solid blue divs.

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

2 个解决方案

#1

Now I understand.

现在我明白了。

CSS SOLUTION

.thereisaproblem{
    position:relative;
}

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

JAVASCRIPT SOLUTION

I'll post with jQuery but it's not necesssary, it can be done just as fine with simple good old javascript.

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

All the code does is if the user has scrolled 100px from the top then it hides whatever div has the class top (in your case is what you had with #1), and shows the div with class bottom. Otherwise, it does the opposite. You'd have to see what's the best distance for you to use to satisfy your purpose.

所有的代码都是如果用户从顶部滚动了100px然后它隐藏了任何具有类*的div(在你的情况下就是你拥有#1的那个),并显示具有类底部的div。否则,它恰恰相反。您必须看到用于满足您目的的最佳距离。

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

In regards to CSS:

关于CSS:

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

Notice how initially the div (third div) is in display none so that only the first div is visible.

注意最初div(第三个div)是如何显示none,以便只有第一个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>

#2

Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; of the next parent to have a position: relative;. Defining position will fix your overlapping issue, however, the functionality you are asking for to have text be input in certain divs depending on ID will require javascript/jquery, or even PHP.

如果没有定义固定文本的实际位置,它将始终默认为top:0;左:0;下一个父母有一个职位:亲属;定义位置将解决您的重叠问题,但是,您要求根据ID在某些div中输入文本的功能将需要javascript / jquery,甚至PHP。

#1