How do I make fixed position but only in a div. From a point to another point

Question

Ok. As you can see from the title I am searching a way to do this: http://preview.ab-themes.com/?product=revelance . Just look how the first text is following you when scrolling down the at a certain point it stops. How can I do this?

Answer 1

You can resolve it nice with jQuery. See working Fiddle

CSS:

 #div1 {
    margin-top: 400px;
    margin-bottom: 500px;
    height: 200px;
    width: 100px;
    border: 2px solid black;
    padding: 30px;
    overflow: hidden;
}
#flowingtext {
    top: 0;
    margin: 0;
    position: relative;
}

JavaScript:

window.onscroll = function () {
        if (($(window).scrollTop() - $("#div1").offset().top) >= $("#div1").height() -   $("#div1").innerHeight() && ($(window).scrollTop() - $("#div1").offset().top) <= $('#div1').height()) {

            $('#flowingtext').css('top', $(window).scrollTop() - $("#div1").offset().top + "px");
        }
    };

HTML:

<div id="div1">
        <h1 id="flowingtext">
                its flowing
            </h1>
</div>