CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BentCoder
BentCoder

Reputation: 12750

Fixing div after scrolling up and keeping it fixed after page refresh

I'm having two problems with this example:

  1. 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.

  2. 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.

JSFIDDLE here

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

Answers (2)

user2930889
user2930889

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

caramba
caramba

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

Related Questions