jQuery
【jQuery】jQueryを使用してスティッキーナビゲーションを作成するScrollNaviJs
September 3, 2018

ScrollNaviJsは、jQueryを使用してスティッキーナビゲーションを作成するプラグイン。
jqueryプラグインとScrollNaviJsをインクルード。
<script src="js/jquery.js"></script> <script src="js/scroll_navi.js"></script> <script> $(document).ready(function(){ $("#nav").scroll_navi(); }); </script>
bodyタグにhtmlコードを置く
<div id="nav"> <div class="container"> <ul> <li><a href="#section1">Section1</a></li> <li><a href="#section2">Section2</a></li> <li><a href="#section3">Section3</a></li> <li><a href="https://github.com/senthilraj/ScrollNaviJs#about-me" data-outerpage="true">About Developer</a></li> </ul> </div> </div> <div id="section1">Section1</div> <div id="section2">Section2</div> <div id="section3">Section3</div>
cssファイルを置く
<link rel="stylesheet" type="text/css" href="css/scrollnavi.css">
スクロール速度を設定する場合
$("#nav").scroll_navi({speed:1500});
別のページのリンクを設定する場合
<a href="https://github.com/senthilraj/ScrollNaviJs#about-me" data-outerpage="true">About Developer</a>
MIT