Thanh menu chạy cố định trên top

1. Tổng quan
- Thanh menu chạy cố định trên top
- đến một vị trí nhất định sẽ không lên top:0 mà chỉ là 10px

2. Cách làm
- mình có demo làm cho trang http://www.vienduongtech.com
Bước 1: chèn thêm css ngay trên đoạn  ]]</b:skin>

#sticky_navigation {
background: #ffffff;
width: 100%;
margin-right: 0px;
left: 0px;
position: relative;
z-index: 9999;
}

Bước 2: tìm đoạn sau (đối với skin của vienduongtech, còn không thì chèn phần cần chạy dọc)

<div class='menu-full '> 

- chèn lên trên đoạn code sau

<div id='sticky_navigation'> 

và nhớ đóng thẻ </div> (mẹo tìm hết thẻ div: Nhấn F12 và click chuột phải vào đoạn cần xem thẻ ở đây là <div class='menu-full '> )
* Làm tới đây là đã chạy dọc rồi, tuy nhiên chỉ cố định trên top chứ chưa dừng cách top 10px, chuyển qua bước kế tiếp



Bước 3: Chèn đoạn js này sau ở trên thẻ </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $(&#39;#sticky_navigation&#39;).offset().top;
// our function that decides weather the navigation bar should have &quot;fixed&quot; css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we&#39;ve scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top &gt; sticky_navigation_offset_top) {
$(&#39;#sticky_navigation&#39;).css({ &#39;position&#39;: &#39;fixed&#39;, &#39;top&#39;:0, &#39;left&#39;:0 });
} else {
$(&#39;#sticky_navigation&#39;).css({ &#39;position&#39;: &#39;relative&#39; });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
// NOT required:
// for this demo disable all links that point to &quot;#&quot;
$(&#39;a[href=&quot;#&quot;]&#39;).click(function(event){
event.preventDefault();
});
});
</script>