직접 만든 spy scroll

jquery 로 직접 스파이 스크롤 만들었습니다. 

다른 스파이 스크롤이랑 다르게 해당 컨텐츠가 윈도우 밑에 올라올 경우 

네비게이션 리스트 해당 항목의 class에 action을 붙여 줍니다. (bootstrap)

    <script>
        //spy scroll
 
        //ナビゲーションバーに色を付ける
        function spyScroll(top, bottom) {
 
            //ナビゲーションバー（ul）
            var nav = $(".nav.linked_list");
 
            //ナビゲーションリスト（li）
            var list = nav.children(":not(:first-child)");
 
            //画面範囲以内の項目に色を付ける。
            list.each(function () {
 
                //ナビゲーション項目
                var toc = $(this).children().attr("href").slice(1);
 
                //見える画面の上段
                var top_position = $("#" + toc).offset().top;
 
                //見える画面の下段
                var bottom_position = top_position + $("#" + toc).innerHeight();
 
                //取得したウィンドウズ画面(top, bottom)と見える画面の上段と下段を比較してナビゲーションバーに色を付ける。
                if (bottom_position > top && top_position < bottom) {
                    $(this).addClass("active");
                } else {
                    $(this).removeClass("active");
                }
 
            });
        }
 
        $(document).ready(function () {
 
            //画面の高さ（window size）
            var windowHeight = $(window).innerHeight();
 
            //呼び出した時のウィンドウズの上
            var window_top = $(window).scrollTop();
            //呼び出した時のウィンドウズの下
            var window_bottom = window_top + windowHeight;
 
            //ナビゲーションバーに色を付ける。
            spyScroll(window_top, window_bottom);
 
            //スクロールする時にイベントを発生してナビゲーションバーに色を変更する。
            $(window).scroll(function () {
                //現在の上
                var scroll_top = $(this).scrollTop();
                //現在の下
                var scroll_bottom = scroll_top + windowHeight;
                //ナビゲーションバーに色付け。
                spyScroll(scroll_top, scroll_bottom);
            });
 
        });
 
    </script>
 

일본에서 개발하니 일본어 설명 ..

네비게이션 리스트를 불러와서 첫번째 꺼는 빼는데 타이틀이라 필요 없어서 뺐음.