jquery.stickUp实现粘性锚点内容导航条菜单效果代码
代码语言：html
所属分类：菜单导航
代码描述：jquery.stickUp实现粘性锚点内容导航条菜单效果代码，根据网页内部id实现各个内容锚点跳转。
代码标签： ue-scroll 网页 下拉 滚动 显示 返回 按钮 返回 顶部
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap & Snippet plugin core CSS -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<!-- Custom styles for this template -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/stickUp.css">
</head>
<body>
<!-- START THE COVER -->
<div id="home" class="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>stickUp</h1>
<h3>a jQuery plugin</h3>
<p>A simple plugin that <i>"sticks"</i>an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.</p>
</div>
</div>
</div>
</div>
<!-- END COVER -->
<!-- START THE NAVBAR -->
<div class="navbar-wrapper">
<div class="container">
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">stickUp</a></div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="menuItem active"><a href="#home">Home</a></li>
<li class="menuItem"><a href="#features">Features</a></li>
<li class="menuItem"><a href="#updates">Updates</a></li>
<li class="menuItem"><a href="#installation">Installation</a></li>
<li class="menuItem"><a href="#one-pager">One Pager</a></li>
<li class="menuItem"><a href="#extras">Extras</a></li>
<li class="menuItem"><a href="#wordpress">Wordpress</a></li>
<li class="menuItem"><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
<!-- END NAVBAR -->
<!-- START THE CONTENT -->
<div id='contents'>
<!-- START THE FEATURES -->
<div id="features" class="row featurette container marketing">
<center>
<h4 style='margin-bottom:0px;margin-top:20px;'>by <b>Liran Cohen</b></h4>
<h5 style='margin-top:5px;'>
<mute>v0.4.5 BETA</mute>
</h5>
</center>
<!-- Three columns of text -->
<div class="row">
<h2>Simple Integration</h2>
<p><b>stickUp</b>is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make <i>any</i>element, on <i>any</i>page, stick to the top of the browser window as the user scrolls past it. This feature
is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.</p>
<p><a class="btn btn-default" href="#installation">View details »</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4"><img src="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png">
<h2>The "One Pager"</h2>
<p>Although <b>stickUp</b>was made to work on any kind of website, it was originally designed for the <i>"one-pager"</i>style of websites. By using CSS the sticky navigation menu item will be highlighted as it's correlating content
is crolled in and out of view.</p>
<p><a class="btn btn-default" href="#one-pager">View details »</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4"><img src="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png">
<h2>Open Source</h2>
<p>The GNU Lesser General Public License is a free software license published by the Free Software Foundation. The LGPL allows developers and companies to use and integrate LGPL software into their own (even proprietary) software
without being required (by the terms of a strong copyleft) to release the source code of their own software-parts.</p>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
</div>
<!-- END FEATURES -->
<!-- START THE UPDATES -->
<div id="updates" class="row featurette">
<div class="col-lg-12">
<h2 class="featurette-heading">Updates</h2>
</div>
<div class="col-lg-offset-1 col-lg-10">
<h3>Beta version is available! <small><b><i>Nov 1st, 2013</i></b></small></h3>
<p>The first version of the <b><i>stickUp</i></b>jQuery plugin has oficially been launched. This is still in Beta and there may be a few bugs, but they are will get sorted out in the coming weeks. Pleaes contact us if you experience any
troubles. Check back often for updates on new features.</p>
</div>
<div class="col-lg-offset-1 col-lg-10">
<h3>"One Pager" anchor functionality. <small><b><i>Oct 31st, 2013</i></b></small></h3>
<p>Decided to add anchor functionality so that as certain sections of a 'One Pager' style website, like this one, could trigger a CSS change as they're scrolled into view. That way your users know where they are while they're scrolling
through content. More options are coming for this in the future.</p>
</div>
<div class="col-lg-offset-1 col-lg-10">
<h3>In need of Margin... <small><b><i>Oct 30th, 2013</i></b></small></h3>
<p>When I initially made the plugin the goal was to make the element stick to the very top, but after deciding to make an official example page for it I realizd that I loved the look of a floating plugin. So I added a little feature called
<b><i>marginTop</i></b>to the mix. This allows the element to be caught by it's margin rather than when it hits the top of the page.</p>
</div>
<div class="col-lg-offset-1 col-lg-10">
<h3>stickUp is Alive! <small><b><i>Oct 29th, 2013</i></b></small></h3>
<p>I've decided to create a plugin out of necessity. There are plenty of "sticky nav" jQuery plugins available out there, but none of them seem to work as smoothly as I'd like. I decided to create my own and out of that stickUp was born!
It's not perfect and has it's kinks, but they will be worked out over the coming weeks.</p>
</div>
</div>
<!-- END UPDATES -->
<!-- START THE INSTALLATION -->
<div id="installation" class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Installation Instructions.<br><span class="text-muted">Made simple.</span></h2>
<p class="lead">Download or Clone the stickUp javascript file from GitHub. Unpack it into an appropriate directory on your web sever. Make sure you also have jQuery available. If you need information about jQuery please .</p>
<p class="col-lg-offset-1"><a class="btn btn-large btn-primary" href="http://github.com/LiranCohen/stickUp">Visit GitHub</a><br><br></p>
<p class="lead">Now include the stickUp javascript file to load within your website. Do so by inserting the following code at the end of your footer. Make sure you're pointing to the correct location of the javascript file.</p>
<xmp>
<script src="js/stickUp.min.js"></script>
</xmp>
<p class="lead">Next, simply insert this code at the end of your footer under the stickUp javascript file we added in the last step. Alternitively, you could put the code into existing javascript. Replace <i>'.navbar-wrapper'</i>with the class of
the element you would like to become sticky.</p>
<xmp>
<script type="text/javascript">
//initiating jQuery jQuery(function($) { $(document).ready( function() { //enabling stickUp on the '.navbar-wrapper' class $('.navbar-wrapper').stickUp(); }); });
</script>
</xmp>
<p class="lead">That's All!</p>
</div>
<div class="col-md-5"></div>
</div>
<!-- END INSTALLATION -->
<!-- START THE ONE-PAGER -->
<div id="one-pager" class="row featurette">
<div class="col-md-5"></div>
<div class="col-md-7">
<h2 class="featurette-heading">The "One-Pager" navigation. <span class="text-muted"><br>Try it for yourself.</span></h2>
<p class="lead">You have a "one-pager" layout and would like for your sticky navbar to let the user know what they are currently viewing on the page. Simply follow these instructions in order to enable this functionality.</p>
<p class="lead"><b>First,</b>make a list of the different elements within your page that you .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0