当前位置:主页 > 建站教程 > 建站技术 >

导航跟随滚动条置顶移动

发布时间:2014-02-10 来源:未知 浏览: 关键词:导航条滚动置顶 

<script src="***/jquery.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
var topmenu = jQuery("nav");
var topmenu_top = topmenu.offset().top;
reset_topmenu_top(topmenu, topmenu_top);
jQuery(window).scroll(function() { 
reset_topmenu_top(topmenu, topmenu_top); 
}); 
}); 
function reset_topmenu_top(topmenu, topmenu_top) { 
var document_scroll_top = jQuery(document).scrollTop(); 
if (document_scroll_top > topmenu_top) {
topmenu.css({'position':'fixed','top':'0px'});
} 
if (document_scroll_top <= topmenu_top) {
topmenu.attr('style',{'top':topmenu_top+'px'});
}
} 
</script> 

<nav class="nav"> //这里的nav样式自己在CSS控制
<div class="row">
<div class="large-12 columns">
<ul class="nav-bar">
<li data-magellan-arrival="download" class="active"><a class="smooth" href="#download">Download</a></li><li data-magellan-arrival="getstarted" class=""><a class="smooth" href="#getstarted">Get started</a></li><li data-magellan-arrival="usage"><a class="smooth" href="#usage">Demos &amp; Usage</a></li><li data-magellan-arrival="documentation"><a class="smooth" href="#documentation">Documentation</a></li><li data-magellan-arrival="themes"><a class="smooth" href="#themes">Themes</a></li><li data-magellan-arrival="development"><a class="smooth" href="#development">Development</a></li>
</ul>
</div>
</div>
</nav>

魔酷阁-专业织梦模板下载平台,转载请注明出处:https://www.mokuge.com/webdesign/74.html
责任编辑:mokuge

相关文章

    共有人阅读,期待你的评论!评论
    Top