Question

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

我已尝试在以下代码中更改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;

Answer 1

让初始偏移值为30px，使其保持在＆＃34; home＆＃34;默认情况下。现在给出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等）

Flexslider和scrollspy相互冲突

1 个答案: