Прошу прощения за название. Я даже не представляю как правильно задать вопрос. При скролле текст нового блока накладывается на предыдущий(см. jsfiddle). Я понимаю почему это происходит, но как этого избежать? С или без js не важно. Даже с js у меня нет ни малейшей идеи как это реализовать. Проскролльте пример до конца, что бы понять в чем проблема.
body {
background: whitesmoke;
margin: 0;
padding: 0;
}
.bg {
width: 100%;
height: 100vh;
position: relative;
background-size: cover;
background: no-repeat fixed center;
color: white;
font-size: 50px;
overflow: hidden;
}
.bg table {
font-family:"HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
table td {
width: 100%;
text-align: center;
vertical-align: middle;
}
.col1 {
background-image: url("http://i.imgur.com/JU71kee.jpg")
}
.col2 {
background-image: url("http://i.imgur.com/mRI807h.jpg")
}
.col3 {
background-image: url("http://i.imgur.com/E11e6Mk.jpg")
}
.col4 {
background-image: url("http://i.imgur.com/KcEHPYF.jpg")
}
<div class="bg col1">
<table>
<tr>
<td>Page 1</td>
</tr>
</table>
</div>
<div class="bg col2">
<table>
<tr>
<td>Page 2</td>
</tr>
</table>
</div>
<div class="bg col3">
<table>
<tr>
<td>Page 3</td>
</tr>
</table>
</div>
<div class="bg col4">
<table>
<tr>
<td>Page 4</td>
</tr>
</table>
</div>