I want to do something like the "How to Format" on Ask Question page of stackoverflow.

Originally the div has position:relative. When any part of the div is out of screen, it bees position:fixed.

How to implement it?

Edit: More precisely, what I want is:

At beginning, the div is Xpx from the top of window.
When I scroll down (X+Y)px, normally, the top Ypx part of the div will be hidden.
But I hope the whole div be fixed on the top of window. i.e. {position:fixed;top:0}
And if I scroll up back, the div will go back to Xpx from the top of window.

More more precisely, I want a more beautiful code for this:

$(document).ready(function()
{
    var e = $('#myDiv');
    var offsetTop = e.offset().top;
    var positionTop = e.position().top;

    $(window).scroll(function() {
        if($(window).scrollTop() > offsetTop) {
            e.css({'position' : 'fixed', 'top' : '0px'});
        }
        else {
            e.css({'position': 'relative', 'top': positionTop});
        } 
    });
});

I want to do something like the "How to Format" on Ask Question page of stackoverflow.

Originally the div has position:relative. When any part of the div is out of screen, it bees position:fixed.

How to implement it?

Edit: More precisely, what I want is:

At beginning, the div is Xpx from the top of window.
When I scroll down (X+Y)px, normally, the top Ypx part of the div will be hidden.
But I hope the whole div be fixed on the top of window. i.e. {position:fixed;top:0}
And if I scroll up back, the div will go back to Xpx from the top of window.

More more precisely, I want a more beautiful code for this:

$(document).ready(function()
{
    var e = $('#myDiv');
    var offsetTop = e.offset().top;
    var positionTop = e.position().top;

    $(window).scroll(function() {
        if($(window).scrollTop() > offsetTop) {
            e.css({'position' : 'fixed', 'top' : '0px'});
        }
        else {
            e.css({'position': 'relative', 'top': positionTop});
        } 
    });
});

• javascript
• css

Share Improve this question Follow edited Aug 25, 2016 at 10:09 david_p 6,59622 gold badges3333 silver badges2626 bronze badges asked Aug 8, 2011 at 3:35 Lai Yu-HsuanLai Yu-Hsuan 28.2k2929 gold badges9999 silver badges168168 bronze badges 1

• I don't see anything inelegant with that code, other than the fact you may want to concatenate the two e.css's together in the else block, remove the needless event argument and fix up part of the formatting. EDIT: I'll post an answer with this. – foxy Commented Aug 8, 2011 at 9:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

$(document).ready(function()
{
    var e = $('#myDiv');
    var jWindow = $(window);
    var offsetTop = e.offset().top;
    var positionTop = e.position().top;

    jWindow.scroll(function()
    {
        if(jWindow.scrollTop() > offsetTop)
            e.css({'position':'fixed', 'top':0});
        else
            e.css({'position':'relative', 'top':positionTop});
    });
});

I wrote a piece of code which really works:

$(document).ready(function()
{
    var e = $('#myDiv');
    var offsetTop = e.offset().top;
    var positionTop = e.position().top;

    $(window).scroll(function(event) {
        if($(window).scrollTop() + 20 > offsetTop) {
                e.css({'position' : 'fixed', 'top' : '20px'});
        }
        else {
            e.css('position', 'relative');
            e.css('top', positionTop);
        } 
    });
});

But I wonder whether there is a better solution.

I adapted @lai-yu-hsuan 's code above and it didn't work. The sticky element would disappear after the initial scroll if you scrolled back up, but this worked as intended for me. I hope this helps someone! Please note that I changed the sticky element to a class, "sticky-top" so it can apply to multple containers.

jQuery(document).ready(function()
{
    var e = jQuery('.sticky-top');
    var offsetTop = e.offset().top;
    var positionTop = e.position().top;
    var positionLeft = e.position().left;
    var stickyWidth=e.width();
    var stickyHeight=e.height();

    jQuery(window).scroll(function(event) {
        if(jQuery(window).scrollTop() + 20 > offsetTop) {
                e.css({'position' : 'fixed', 'top' : '20px','left':positionLeft+'px'});
                e.css({'width':stickyWidth+'px','height':stickyHeight+'px'});
        }
        else {
                   e.css('position', 'relative');
                   e.css('top', '');
                   e.css('left','');
        } 
    });
});