注册 登录 欢迎您到模板精:织梦模板_dede模板_免费网站模板_网站源码下载

建站经验_免费网站模板_dede模板

为大家提供织梦模板,dede模板,织梦网站建设,织梦网站建设教程,免费网站模板,网站源码下载,织梦模板下载,织梦自适应模板,织梦建站教程。

当前位置:首页 > 建站经验 >

导航跟随滚动条置顶移动

免费网站模板 2014-02-10 14:52 建站经验 评论

<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>