0

I have some sample code where I am trying to make a nav sticky when it reaches a certain point. The issue is that the scroll method keeps firing and it appears to be stuck in some kind of loop where the class is being constantly added and removed, making the sticky nave to flickr. Hence my calculations are as follows:

Stickme {

  constructor(cfg) {
        this.win = $(window);
        this.nav = $('.nav');
        this.setListeners();
  }

    setListeners () {
        this.win.scroll (() =>  {   
            this.debouncedScrollPage = debounce(this.scrollme, 3000);
            this.debouncedScrollPage();
            });
    }


    scrollme() {
        let total = this.nav.offset().top
            if ((total) < this.win.scrollTop()) {
                this.nav.addClass('nav--sticky');
            }else {
              this.nav.removeClass('nav--sticky');
            }
    }
    }
Jacklyn N
  • 77
  • 1
  • 12
  • 1
    Remove `this.debouncedScrollPage()` from the `this.win.scroll` callback and place it under the `scroll` function? – Wild Beard Oct 11 '17 at 20:50
  • Unfortunately that does not work as it complains of "this.debouncedScrollPage is not a function" – Jacklyn N Oct 13 '17 at 15:25
  • 1
    Wait, where are you getting the `debounce()` function from? I created a Pen on CodePen, used lodash, changed your `= debounce(this.scrollme, 3000)` to `= _.debounce(this.scrollme, 3000)` and it worked fine. – Wild Beard Oct 13 '17 at 17:28

0 Answers0