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

• Tag
• jQuery
• Navigation