مقاله: آموزش متحرک کردن Navbar همانند یاهو (برای اولین بار در VBiran)

نمونه رو میتونید در یاهو ببنید :

Yahoo!

به قالب headinclude_bottom اضافه کنید :

کد:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function sticky_relocate(){var window_top = $(window).scrollTop();var div_top = $('.above_body').offset().top +130;if (window_top > div_top){$('#stickyBar').addClass('stick');} else {$('#stickyBar').removeClass('stick');}}$(function(){$(window).scroll(sticky_relocate);sticky_relocate();});</script>

در additional.css بزنید :

کد:

#stickyBar.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  width:1200px;
  height:59px;
  margin:0 auto;
  background: #247FB2;
  border-radius: 0 0 0.5em 0.5em;
  display: block;
}

حالا در قالب navbar باید کدی قرار بدید تا کار کنه ، اما برای هر قالبی متفاوت خواهد بود ، مثلا برای default ویبولتین :

این کد رو پیدا کنید :

کد:

<div id="navbar" class="navbar">

بعدش بزنید :

کد:

<div id="stickyBar">

شات پیوست شد ، اگر برای شما کار نکرد کد های navbar رو اینجا قرار بدید

همینطور برای تغییر ظاهر این قسمت باید کد هایی که در additional.css قرار میدید رو تغییر دهید