单页菜单,链接突出显示undefined不是offset.top

时间:2016-11-10 11:10:49

标签: javascript jquery

所以我使用这里的指南处理单页菜单:http://callmenick.com/post/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation

HTML

<div class="um-member-nav-menu">
        <ul>
            <li><a href="#car">Car</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#students">Students</a></li>
            <li><a href="#reviews">Reviews</a></li>
            <li><a href="#social">Social</a></li>
        </ul>
    </div>
<div class="um-member-profile-content">
    <div id="car">Content</div>
    <div id="about">Content</div>
    <div id="students">Content</div>
    <div id="reviews">Content</div>
</div>

JS

     function profileHeader() {

        /** 
         * This part does the "fixed navigation after scroll" functionality
         * We use the jQuery function scroll() to recalculate our variables as the 
         * page is scrolled/
         */
        $(window).scroll(function() {
            var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
            var div_top = $('.um-member-nav-menu').offset().top;

        });

        /**
         * This part causes smooth scrolling using scrollto.js
         * We target all a tags inside the nav, and apply the scrollto.js to it.
         */
        $(".um-member-nav-menu ul li a").click(function(evn) {
            evn.preventDefault();
            $('html,body').scrollTo(this.hash, this.hash);
        });

        /**
         * This part handles the highlighting functionality.
         * We use the scroll functionality again, some array creation and 
         * manipulation, class adding and class removing, and conditional testing
         */
        var aChildren = $(".um-member-nav-menu li").children(); // find the a children of the list items
        var aArray = []; // create the empty aArray
        for (var i = 0; i < aChildren.length; i++) {
            var aChild = aChildren[i];
            var ahref = $(aChild).attr('href');
            aArray.push(ahref);

        } // this for loop fills the aArray with attribute href values

        $(window).scroll(function() {
            var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
            var windowHeight = $(window).height(); // get the height of the window
            var docHeight = $(document).height();

            for (var i = 0; i < aArray.length; i++) {
                var theID = aArray[i];

                var divPos = $(theID).offset().top; // get the offset of the div from the top of page
                var divHeight = $(theID).height(); // get the height of the div in question
                if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                    $("a[href='" + theID + "']").addClass("active");
                } else {
                    $("a[href='" + theID + "']").removeClass("active");
                }
            }

            if (windowPos + windowHeight == docHeight) {
                if (!$(".um-member-nav-menu li:last-child a").hasClass("active")) {
                    var navActiveCurrent = $(".um-member-nav-menu li a.active").attr("href");
                    $("a[href='" + navActiveCurrent + "']").removeClass("active");
                    $(".um-member-nav-menu li:last-child a").addClass("active");
                }
            }
        });
    };

所以代码实际上有效,但是我在控制台中收到了数百个JS错误,说明&#34; TypeError:undefined不是对象(评估&#39; $(s).offset()赛拓朴&#39;)&#34;

我已经回应了&#39; theID&#39;并且它正确地获得了部分ID。但似乎正在过去&#39;

直播链接:http://beta.passpilot.co.uk/user/ed-craddock/

任何帮助都会很棒!

0 个答案:

没有答案