Fixed text visible only inside one div
<p>There is a code like that(simplified):</p>

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

&lt;/style&gt;
&lt;body&gt;
    &lt;div class="thereisaproblem" id="id1"&gt;
    &lt;div class="fix"&gt; Fixed text &lt;/div&gt;
    &lt;/div&gt; 

    &lt;div class="contentblock"&gt;
    Website content 1
    &lt;/div&gt;

    &lt;div class="thereisaproblem" id="id3"&gt;
    &lt;div class="fix"&gt; Another fixed text &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="contentblock"&gt;
    Website content 2
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>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.</p>

<hr>

<p>there is link to <a href="https://jsfiddle.net/gkhsrwtb/7/" rel="nofollow">jsfiddle</a></p>

<hr>

<p>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.</p>