先端開発学習ノート4

おととい、固定ナビゲーションバーがページスクロールバーの距離に応じて自動的に位置決めされる効果を学び、現在のスクロールバーの値とページ内の対応するコンテンツ値の大きさの関係を判定することで選択することを中心としました.jsコードは次のとおりです(jQueryライブラリが使用されています):

        $(document).ready(function () {

            $(window).scroll(function () {

                var top = $(window).scrollTop();

                var menu = $("#menu");

                var items = $("#content").find(".item");

                //        ，       。

                var currentId = "";

                //                      

                items.each(function () {

                    var This = $(this);

                    var itemTop = This.offset().top;

                    if (top > itemTop - 200) {

                        currentId = This.attr("id");

                    } else {

                        return false;

                    }

                })

                //      a    current，       current

                var currentLink = menu.find(".current");

                if (currentId && currentId != "#"+currentLink.attr("href")) {

                    currentLink.removeClass("current");

                    menu.find("[href=#" + currentId + "]").addClass("current");

                }

            })

        })