How to make a very long div's content always visible?

Asked Oct 30 '17 at 05:57

Active Oct 30 '17 at 05:57

Viewed 49 times

I have some very long divs which every div have only a line of text. So, when user scroll, its content will be invisible. So I want to make the content of these divs always visible.

Could anyone please give me some suggestion about that?

Example:

span {
    vertical-align: middle;
    height: 2000px;
    width: 100px;
    border: 1px solid black;
    display: table-cell;
}

.red {
  background: rgba(255,0,0,0.3);
}

.green {
  background: rgba(0,255,0,0.3);
}

<div>
<span class="red">
aaaaa
</span>
</div>
<div>
<span class="green">
bbbbb
</span>
</div>

asked Oct 30 '17 at 05:57

Sayakiss

6,878
8
61
107

What do you mean by "So I want to make the content of these divs always visible"? – mayank bisht Oct 30 '17 at 06:01
Keep that line of text visible when the user is viewing that div. @mayankbisht – Sayakiss Oct 30 '17 at 06:03
1

You may use sticky div inside long divs. Please refer to https://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to – Ali Sheikhpour Oct 30 '17 at 06:03
@AliSheikhpour thanks, that solved my problem. – Sayakiss Oct 30 '17 at 06:29
You may need a little modification to stop sticky at an exact height e.g. 2000 – Ali Sheikhpour Oct 30 '17 at 06:34

How to make a very long div's content always visible?

0 Answers0