I have encountered two issues with this particular example:
One problem is that the
fixed_header_bottomshould stay fixed beneath thefixed_header_topwhen scrolling up, causing thefixed_header_middleto gradually disappear as you scroll up, or vice versa. Interestingly, this function works on my computer but not on JSFIDDLE for some unknown reason! Hence, I had to adjust it accordingly.The second issue arises when refreshing the page while the cursor is positioned at the bottom; the
fixed_header_bottomshould still remain fixed below thefixed_header_top. Strangely, this only fails in the Opera browser (version 12.16), whereas other browsers handle it fine.
You can view the JSFIDDLE here
To address these problems, how can I solve them?
Javascript:
$(window).load(function ()
{
$(document).ready(function ()
{
$(window).bind("scroll", function (e)
{
if (! $('#fixed_header_bottom').hasClass('fixed'))
{
if ($(document).scrollTop() >= 300)
{
$('#fixed_placeholder').show();
$('#fixed_header_bottom').addClass('fixed');
}
}
else
{
if ($(document).scrollTop() < 300)
{
$('#fixed_placeholder').hide();
$('#fixed_header_bottom').removeClass('fixed');
}
}
});
});
});
CSS:
*
{
margin: 0;
padding: 0;
}
#fixed_header_top
{
display: block;
position: fixed;
width: 100%;
height: 50px;
background-color: #DD33DD;
top: 0px;
}
#fixed_header_middle
{
display: block;
width: 100%;
height: 300px;
background-color: #DDDD00;
margin-top: 50px;
}
#fixed_header_bottom, #fixed_placeholder
{
display: block;
width: 100%;
height: 50px;
background-color: #11DD55;
}
#fixed_placeholder
{
display: none;
}
.fixed
{
position: fixed;
top: 50px;
}
#body_block
{
display: block;
width: 100%;
background-color: #FFFFFF;
}
HTML:
<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
<div id="fixed_header_bottom">fixed_header_bottom</div>
<div id="fixed_placeholder">Shouldn't see me</div>
<div id="body_block">BEGIN
<br />
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom [truncated for brevity] END
</div>