Fixed text visible only inside one div

Question

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.

there is link to 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.

Answer 1

Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; 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.

Answer 2

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.

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.

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

In regards to 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 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>

Fixed text visible only inside one div

Question

2 answers

solution1
0 2016-05-02 17:25:50

solution2
0 ACCPTED 2016-05-02 18:58:36

Fixed text visible only inside one div

Question

2 answers

solution1 0 2016-05-02 17:25:50

solution2 0 ACCPTED 2016-05-02 18:58:36

solution1
0 2016-05-02 17:25:50

solution2
0 ACCPTED 2016-05-02 18:58:36