首页 > 网站 > 建站经验 > 正文

导航跟随滚动条置顶移动

2024-04-25 20:30:15
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表