How to make div fixed after you scroll to that div?

This is now possible with CSS only, see https://stackoverflow.com/a/53832799/1482443

In case anyone needs jQuery approach, below is the original answer as it was posted years ago:

I know this is tagged html/css only, but you can't do that with css only. Easiest way will be using some jQuery.

var fixmeTop = $('.fixme').offset().top;       // get initial position of the element


$(window).scroll(function() {                  // assign scroll event listener


var currentScroll = $(window).scrollTop(); // get current position


if (currentScroll >= fixmeTop) {           // apply position: fixed if you
$('.fixme').css({                      // scroll to that element or below it
position: 'fixed',
top: '0',
left: '0'
});
} else {                                   // apply position: static
$('.fixme').css({                      // if you scroll above it
position: 'static'
});
}


});

http://jsfiddle.net/5n5MA/2/

jquery function is most important

<script>
$(function(){
var stickyHeaderTop = $('#stickytypeheader').offset().top;


$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickytypeheader').css({position: 'fixed', top: '0px'});
$('#sticky').css('display', 'block');
} else {
$('#stickytypeheader').css({position: 'static', top: '0px'});
$('#sticky').css('display', 'none');
}
});
});
</script>

Then use JQuery Lib...

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Now use HTML

<div id="header">
<p>This text is non sticky</p>
<p>This text is non sticky</p>
<p>This text is non sticky</p>
<p>This text is non sticky</p>
</div>


<div id="stickytypeheader">
<table width="100%">
<tr>
<td><a href="http://growthpages.com/">Growth pages</a></td>


<td><a href="http://google.com/">Google</a></td>


<td><a href="http://yahoo.com/">Yahoo</a></td>


<td><a href="http://www.bing.com/">Bing</a></td>


<td><a href="#">Visitor</a></td>
</tr>
</table>
</div>


<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>

Check DEMO HERE

it worked for me

$(document).scroll(function() {
var y = $(document).scrollTop(), //get page y value
header = $("#myarea"); // your div id
if(y >= 400)  {
header.css({position: "fixed", "top" : "0", "left" : "0"});
} else {
header.css("position", "static");
}
});

<script>
if($(window).width() >= 1200){
(function($) {
var element = $('.to_move_content'),
originalY = element.offset().top;


// Space between element and top of screen (when scrolling)
var topMargin = 10;


// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');


$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();


element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 0);
});
})(jQuery);
}

Try this ! just add class .to_move_content to you div

This is possible with CSS3. Just use position: sticky, as seen here.

position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;

Adding on to @Alexandre Aimbiré's answer - sometimes you may need to specify z-index:1 to have the element always on top while scrolling. Like this:

position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
z-index: 1;