2

テンプレートを使用しています。ページに flexslider を 2 回実装しました。しかしその後、scrollspy で問題が発生しました。ここまたはウェブで見つけたすべての解決策を試しましたが、まだうまくいきません。問題は、ナビゲーションメニューから「ミッション」を選択すると、適切なセクションにスクロールされますが、前のボタン「テクノロジー」がアクティブになり、強調表示されます。他のセクションについても同様です。ミッションをクリックした後、手動でもう少しスクロールすると、アクティブになります。ここで問題を確認できます

次のコードで、オフセット値とフレックススライダーの高さ (技術セクションはこちら) を変更してみました。誰でもこれを手伝ってもらえますか？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 にします。ここで、スクロールトップが特定の値を超えているかどうかを確認する if 条件を指定します。以下のように変更してください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 に答える