Fiddle: http://jsfiddle.net/ud6hejm6/
I was tasked with creating a website for a video game tournament. By opening the fiddle link provided, you can preview the page layout. A central div is featured in the design:
<div class="middle teko" id="mezzo">
<span style="color: purple">EndGame</span><span style="color: yellow">TV</span> + World Cup
</div>
One key CSS property set was:
html, body {
height:100%;
overflow: hidden;
}
This prevented users from scrolling down the page. However, clicking on the div with id="mezzo" results in a scroll effect thanks to the following JavaScript code snippet.
$(document).ready(function() {
$('#mezzo').click(function(){
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
});
$('#back').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
The id="back" refers to the div displayed when the page is scrolled down.
The Puzzle
When running the jsfiddle demo, everything functions correctly except for one anomaly - as the page scrolls down, the central div with EndGameTV + World Cup (id="mezzo") stays fixed at the center of the screen instead of staying in its original position.
Despite being coded with position: absolute;, it behaves more like position: fixed;. Why does this occur?
Illustration of homepage view:
View upon scrolling down:
To see the live page, visit: