导航滚动切换

最新推荐文章于 2023-04-28 15:35:39 发布

编程之上

最新推荐文章于 2023-04-28 15:35:39 发布

阅读量697

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/ruizhengyun/article/details/45039699

版权

jquery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://www.bootcss.com/p/stickup/stickup.css" rel="stylesheet">
</head>
<body>
<!-- START THE COVER -->
<div id="home" class="carousel" style="height:400px; background: red;"></div>
<!-- END COVER -->
<!-- START THE NAVBAR -->
<div class="navbox">
    <div class="navwrapper">
        <div class="navbar navbar-inverse navbar-static-top">
            <ul class="nav navbar-nav">
                <li class="menuItem active"><a href="#home">首页</a></li>
                <li class="menuItem"><a href="#features">特色</a></li>
                <li class="menuItem"><a href="#updates">更新记录</a></li>
                <li class="menuItem"><a href="#installation">安装</a></li>
                <li class="menuItem"><a href="#one-pager">单页导航</a></li>
                <li class="menuItem"><a href="#extras">额外参数</a></li>
                <li class="menuItem"><a href="#wordpress">Wordpress</a></li>
                <li class="menuItem"><a href="#contact">联系我们</a></li>
            </ul>
        </div>
        <!-- End Navbar -->
    </div>
</div>
<!-- END NAVBAR -->
<!-- START THE CONTENT -->
<div id='contents'>
    <!-- START THE FEATURES -->
    <div id="features" style="height:400px; background:purple;"></div>
    <!-- END FEATURES -->
    <!-- START THE UPDATES -->
    <div id="updates" style="height:400px; background:black;"></div>
    <!-- END UPDATES -->
    <!-- START THE INSTALLATION -->
    <div id="installation" style="height:400px; background: orange;"></div>
    <!-- END INSTALLATION -->
    <!-- START THE ONE-PAGER -->
    <div id="one-pager" style="height:400px; background: pink;"></div>
    <!-- END ONE-PAGER -->
    <!-- START THE EXTRAS -->
    <div id="extras" style="height:400px; background:yellow;"></div>
    <!-- END EXTRAS -->
    <!-- START THE WORDPRESS -->
    <div id="wordpress" style="height:400px; background:green;"></div>
    <!-- END WORDPRESS -->
    <!-- START THE FOOTER -->
    <footer id="contact" style="height:800px; background:gray;"></footer>
    <!-- END FOOTER -->
</div>
<!-- END CONTENT -->
<!-- Bootstrap & Plugins core JavaScript
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<!-- ### IMPORTANT ### stickUp javascript file -->
<script src="http://www.bootcss.com/p/stickup/js/stickUp.min.js"></script>
<!-- ### IMPORTANT ### stickUp options in use -->
<script type="text/javascript">
jQuery(function($) {
$(document).ready( function() {
  $('.navbox').stickUp({
		parts: {
		  0:'home',
		  1:'features',
		  2: 'updates',
		  3: 'installation',
		  4: 'one-pager',
		  5: 'extras',
		  6: 'wordpress',
		  7: 'contact'
		},
		itemClass: 'menuItem',
		itemHover: 'active',
		topMargin: 'auto'
	  });
	});
});
</script>