У меня всё работает с
твоим кодом
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<title>ГГ</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
outline: 0;
}
#top_nav {
width: 100px;
height: 100px;
border:1px solid red;
position: fixed;
}
.container {
width: 100px;
height: 3000px;
}
</style>
</head>
<body>
<div class="container">
<div id="top_nav">123456</div>
</div>
<script>
var h_hght = 150; // высота шапки
var h_mrg = 0; // отступ когда шапка уже не видна
$(function(){
$(window).scroll(function(){
var top = $(this).scrollTop();
var elem = $('#top_nav');
if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top));
} else {
elem.css('top', h_mrg);
}
});
});
</script>
</body>
</html>