2

我正在使用模板。我在一个页面中实现了两次 flexslider。但在那之后我遇到了scrollspy的问题。我已经尝试了在这里或网上找到的所有解决方案，但还没有运气。问题是当我从导航菜单中选择“任务”时，它会滚动到适当的部分，但前一个按钮“技术”被激活并突出显示。同样适用于其他部分。并且当您在单击任务后手动滚动一点时，它将被激活。你可以在这里看到问题

我尝试在以下代码中更改偏移值和 flexslider 的高度（此处为技术部分）。有人能帮忙吗？FlexSlider 的版本是 v2.2.0

    function ScrollSpy(element, options) {
        var href;
        var process  = $.proxy(this.process, this);
        this.$element       = $(element).is('body') ? $(window) : $(element);
        this.$body          = $('body');
        this.$scrollElement = this.$element.on('scroll.bs.scroll-spy.data-api', process);
        this.options        = $.extend({}, ScrollSpy.DEFAULTS, options);
        this.selector       = (this.options.target || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) || '') + ' > ul > li > a';
        this.offsets        = $([]);
        this.targets        = $([]);
        this.activeTarget   = null;
        this.refresh();
        this.process();
    }

    ScrollSpy.DEFAULTS = {
        offset: 30
    }

    ScrollSpy.prototype.refresh = function () {
        var offsetMethod = this.$element[0] == window ? 'offset' : 'position';

        this.offsets = $([]);
        this.targets = $([]);

        var self     = this;
        var $targets = this.$body.find(this.selector).map(function () {
            var $el   = $(this);
            var href  = $el.data('target') || $el.attr('href');
            var $href = /^#\w/.test(href) && $(href);

            return ($href && $href.length && [[ $href[offsetMethod]().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]]) || null
        }).sort(function (a, b) {
            return a[0] - b[0]
        }).each(function () {
            self.offsets.push(this[0]);
            self.targets.push(this[1]);
        });
    }

    ScrollSpy.prototype.process = function () {
        var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset,
            scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight,
            maxScroll    = scrollHeight - this.$scrollElement.height(),
            offsets      = this.offsets,
            targets      = this.targets,
            activeTarget = this.activeTarget, i;

        if (scrollTop >= maxScroll) {
            return activeTarget != (i = targets.last()[0]) && this.activate(i);
        }

        for (i = offsets.length; i--;) {
            activeTarget != targets[i] && scrollTop >= offsets[i] && (!offsets[i + 1] || scrollTop <= offsets[i + 1]) && this.activate( targets[i] );
        }

    }

    ScrollSpy.prototype.activate = function (target) {
        this.activeTarget = target;
        $(this.selector).parent('li').removeClass('current-menu-item');
        var selector = this.selector + '[data-target="' + target + '"],' + this.selector + '[href="' + target + '"]';
        var active = $(selector).parents('li').addClass('current-menu-item');
        active.trigger('activate');
    }

    // SCROLLSPY PLUGIN DEFINITION
    // ===========================

    $.fn.scrollspy = function (option) {
        return this.each(function () {
            var $this   = $(this),
                data    = $this.data('bs.scrollspy'),
                options = typeof option == 'object' && option;
            if (!data) {
                 $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)));
            }
            if (typeof option == 'string') { data[option](); }
        });
    }

    $.fn.scrollspy.Constructor = ScrollSpy;
4

1 回答 1

1

让初始偏移值为 30px，使其默认保持在“home”。现在给出一个 if 条件来检查 scrolltop 是否超过某个值。修改您的ScrollSpy.prototype.process = function ()喜欢如下：

if(this.$scrollElement.scrollTop() > check){
        var scrollTop    = this.$scrollElement.scrollTop() + 300px,
} else {
        var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset,
}

尝试更改check（如 100、200 等）的值

于 2014-12-26T11:16:06.150 回答