Flexslider and scrollspy are conflicting with each other

Question

I'm using a template. I have implemented flexslider twice in a page. But after that I'm having a issue with scrollspy. I have tried every solutions I've found here or on the web, but no luck yet. The issue is when i select the "mission" from navigation menu, it will be scrolled to appropriate section, but the previous button "technology" gets activated and highlighted. Same applies to other sections too. and when you manually scroll a bit further after clicking mission, it will be activated. You can see the issue Here

I have tried changing the offset value and the height of flexslider (technology section here) in following code. Can anyone help with this? The version of FlexSlider is 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;

*When you manually scroll a bit further after clicking mission, it will be activated* - right beacause you're coming to other menu's zone. Hence it will be highlighted — Leo, Dec 26 '14 at 09:44
Exactly, But flexslider is bounded in the section, so limit of that #technologies section should be ended there, but it is extending beyond that to next section. And that is what confusing me, and my applied solutions dont work. — 8bitrebellion, Dec 26 '14 at 09:48
What's the effect if you increase the offset value(say by 200)? — Leo, Dec 26 '14 at 10:43
Wow man, I didnt try increasing this much. Now when its 200 the default activated menu is the 2nd menu item "JEGenres" instead of "home" and the amount of manual scroll after clicking mission is decreased. So I tried with 300, and the manual scroll problem is solved, but the 2nd menu item gets selected. — 8bitrebellion, Dec 26 '14 at 10:53

score 1 · Accepted Answer · answered Dec 26 '14 at 11:16

1

Let the intial offset value to be 30px so that it stays on "home" by default. Now give an if condition to check whether scrolltop exceeds a certain value. Modify your ScrollSpy.prototype.process = function () like below:

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

Try changing the value of check(like 100, 200 etc)

answered Dec 26 '14 at 11:16

Leo

5,017
6
32
55

Hi and thanks Leo. I tried to apply your suggestion, but maybe there is an error somewhere, page didn't load at all, whole blank. I think 300px should be written in different way as it's an unit of css. Sorry if I misunderstood it as I'm new to js yet. Plz suggest. – 8bitrebellion Dec 26 '14 at 11:55
Error might be there because I am not able to run it. Instead of 300px, write offset*10. See if this works. Also try to debug using alerts inside this function to track the movement of control. – Leo Dec 26 '14 at 12:01
I got it bro..I created new variable and put it in the place of 300px. Thank you so much. I think it's the time to learn more about js. – 8bitrebellion Dec 26 '14 at 12:03

Flexslider and scrollspy are conflicting with each other

1 Answers1