Flexslider和Scrollspy彼此衝突

Question

我正在使用模板。我在頁面中實現了兩次flexslider。但之後我遇到了一個滾動問題。我試過了我在這裏或網上找到的所有解決方案，但還沒有運氣。 問題是當我從導航菜單中選擇「任務」時，它將滾動到適當的部分，但上一個按鈕「技術」被激活並突出顯示。同樣適用於其他部分。當你點擊任務後你手動進一步滾動一下，它就會被激活。你可以看到這個問題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，以便它默認保持在「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等）