HTML5: fixed position effect

Question

I have <div id="naujienos">some content</div> and you can find it in the middle of page. All I want is: this div to become fixed position right after I scroll on it. When I scroll back to top it's relative again.

I mean there is interval where that div container has his position fixed.

Sorry for my english. Really looking for answer and thank you in advance!

Answer 1

Look at this: http://jsfiddle.net/5PQ36/1/

You can do this with jQuery...all you have to do is to set scrollTop:

scrollTop() > 300
scrollTop() < 600

In this example, your div will be displayed when you scroll 300 from the top and it'll hide when you reach 600 from the top, same thing when you scroll up.

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 300 && $(window).scrollTop() < 600) {
            $('#naujienos').css("position", "fixed");
        } else {
            $('#naujienos').css("position", "relative");
        }
    });
});