Question

我写了一些jQuery来检查页面上人物的位置并添加一些分类。

但是当我加载jQuery时，我在浏览器控制台中看到了很多错误。滚动时错误的数量会增加。

我收到以下错误：

TypeError: undefined is not an object (evaluating 'refElement.position().top')
Geselecteerd element

我该如何解决这个问题？

jQuery的：

(function($) {
    $(window).scroll(function() {
        var sticky = $('.menu-header-product'),
            scroll = $(window).scrollTop();

        var elementOffset = jQuery("#productnav").offset();
        if (scroll >= elementOffset.top - 88) sticky.addClass('sticky');
        else sticky.removeClass('sticky');
    });
    $(window).scroll(function() {
        var sticky = $('.content'),
            scroll = $(window).scrollTop();

        var elementOffset = jQuery("#productnav").offset();
        if (scroll >= elementOffset.top - 88) sticky.addClass('sticky');
        else sticky.removeClass('sticky');
    });
    $(document).ready(function() {
        $(document).on("scroll", onScroll);

        $('a[href^="#"]').on('click', function(e) {
            e.preventDefault();
            $(document).off("scroll");

            $('a').each(function() {
                $(this).removeClass('active');
            })
            $(this).addClass('active');

            var target = this.hash;
            $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top - 88 /**just subtract the height of the fixed html part */
            }, 500, 'swing', function() {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });

    function onScroll(event) {
        var scrollPosition = $(document).scrollTop();
        $('nav a').each(function() {
            var currentLink = $(this);
            var refElement = $(currentLink.attr("href"));
            if (refElement.position().top - 88 <= scrollPosition && refElement.position().top - 125 + refElement.height() > scrollPosition) {
                $('nav ul li a').removeClass("active");
                currentLink.addClass("active");
            }
            else {
                currentLink.removeClass("active");
            }
        });
    }
})(jQuery.noConflict());

Answer 1

您尚未为.active课程编写任何样式，

我刚刚添加了color:red，它似乎工作正常。

工作演示： https://jsfiddle.net/pytduk9q/3/

希望这有帮助！

由于加载了jQuery，页面上出现Javascript错误

1 个答案: