Question

I want to make absolute DIV that can be scrolled down until it reaches top of the page, then it should became as fixed and stay on top until page is scrolled up again.

Answer 1

Place this code before closing head tag:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(function() {
var top = $('.div').offset().top;
function scroll(){
var scroll = $(window).scrollTop(); 
if (scroll > top) { 
$('.div').css({ 'position': 'fixed', 'top':0 });
} else {
$('.div').css({ 'position': 'absolute','top': top }); 
} 
};
$(window).scroll(function() {
scroll();
});
});

</script>
<style>

body {height: 1000px;}
.header {height: 200px;}
.div {position: absolute;}

</style>

And use this code in body:

<div class="header">Header or logo company</div>
<div class="div"> text or menu or other </div>