【jQuery】シンプルなスティッキーナビゲーションバーNavigation-Bar

Navigation-BarはシンプルなスクロールjQueryを使用したスティッキーナビゲーションバープラグイン。

JS&CSS

<script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

HTML

<header>
<nav class="top-nav">
<div class="left">
<button class="btn btn-section"><span class="fa fa-bars"></span>SECTION</button>
</div>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</ul>
<div class="right">
<button class="btn btn-user">LOGIN</button>
<button class="btn btn-user">SIGN UP</button>
</div>
</nav>
</header>
<div class="main">
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus aliquam massa eget mollis. Aenean gravida risus ut venenatis suscipit. Integer semper purus condimentum quam pulvinar, posuere imperdiet metus placerat. Nunc rutrum felis a eleifend
suscipit. Nullam condimentum rhoncus hendrerit. Proin dapibus risus sed ante facilisis, vitae sodales ante pharetra. Duis dictum dignissim aliquet.</p>
</div>
 
Navigation-Bar

【jQuery】シンプルなスティッキーナビゲーションバーNavigation-Bar

  • LATEST
  • RELATED
  • POPULAR