Reputation: 12750
I'm having two problems with this example:
fixed_header_bottom
should be fixed underneath of fixed_header_top
when scrolled up so fixed_header_middle
disappear gradually when scrolled up, or vice versa. Actually this works on my pc but for some reason it doesn't on JSFIDDLE! so I had to raise it too.
If I refresh the page when the cursor is at the bottom of the page, fixed_header_bottom
should be still fixed underneath of fixed_header_top
. Fails only on Opera browser (12.16), other browsers fine.
How can I solve the problems?
JS:
$(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
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />Bottom
<br />
<br />END
</div>
Upvotes: 0
Views: 1846
Reputation:
you can Save last window Scroll Into a Cookie And read it and get this value to set scroll location :)
it is Best Idea
Or use html sharp Link:
<div id="mydiv" ></div>
<a href="#mydiv" >Link To Div by 'mydiv' id </a>
Upvotes: 0
Reputation: 22490
add this to your jquery code:
if($('#fixed_header_bottom').offset().top<=50) {
$('#fixed_header_bottom').addClass('fixed');
} else {
$('#fixed_header_bottom').removeClass('fixed');
}
here is fiddle: http://jsfiddle.net/6KAdU/5/
Note: It makes no sense to have $(document).ready() inside $(window).load()
Upvotes: 2