CODEWITHSUNDEEP
jquery
Goran Tesic
Goran Tesic

Reputation: 739

Sticky menu: jQuery doesn't add classes to elements after page refresh, works only when scrolling is triggered manually

I'm editing a WordPress theme and I'm using this piece of jQuery code to fix the menu to the top of the page after the window is scrolled down to navigation:

/* -----------------------------------------
Fixed navigation on scroll
----------------------------------------- */
$(document).on('ready', function() {
    var  mn = $(".header-nav");
    ni = $(".nav");
    nis = "navbar__inner_scrolled";
    amns = "admin_main-nav-scrolled";
    mns = "main-nav-scrolled";
    nbm = $(".navbar__brand-mini");
    nnp = $(".navbar__nav-primary");
    wpab = $('#wpadminbar');
    hdr = 97;

    $(window).scroll(function() {
        if($(this).scrollTop() > hdr) {
            nbm.css({"opacity": "1", "transition-delay": "0.2s"});
            mn.addClass(mns);
            ni.addClass(nis);
            nnp.css({"margin-left": "70px", "transition-delay": "0s"});
            if (wpab.length) {
                    mn.addClass(amns);
            }
        } else {
            nbm.css({"opacity": "0", "transition-delay": "0s"});
            mn.removeClass(mns);
            ni.removeClass(nis);
            nnp.css({"margin-left": "0", "transition-delay": "0.2s"});
            if (wpab.length) {
                    mn.removeClass(amns);
            }
        }
    });
});

This is supposed to add classes to elements when the page is refreshed after it has already been scrolled down past the menu, yet it doesn't, but after I start scrolling the page it suddenly starts working. I can't figure out what seems to be the problem.

Upvotes: 0

Views: 596

Answers (2)

Gopikrishna S
Gopikrishna S

Reputation: 2441

Either do a $(window).scroll() after the listener ...

$(window).scroll(function() {
    .
    :
});

$(window).scroll(); // manually fire the listener.

Or put the $(window).scroll(func ...) outside the $(document).ready(func ...) ...

$(window).scroll(function() {
    .
    :
});

$(document).on('ready', function() {
    .
    :
});

This is because the binding of listener is happening after your document is ready to view (after browser re-positions scroll-bars), so your callback is not fired in time, but when you scroll again, the listener is there and gets fired.

Upvotes: 0

user372495
user372495

Reputation: 710

Your code is only called when the scroll() event is triggered. If you wanted to call it beforehand, I'd recommend wrapping it all in a function, and calling it both on scroll() and on ready(). Like so:

var myfunction = function() {
  var  mn = $(".header-nav"),
  ni = $(".nav"),
  nis = "navbar__inner_scrolled",
  amns = "admin_main-nav-scrolled",
  mns = "main-nav-scrolled",
  nbm = $(".navbar__brand-mini"),
  nnp = $(".navbar__nav-primary"),
  wpab = $('#wpadminbar'),
  hdr = 97;

  if($(body).scrollTop() > hdr) {
        nbm.css({"opacity": "1", "transition-delay": "0.2s"});
        mn.addClass(mns);
        ni.addClass(nis);
        nnp.css({"margin-left": "70px", "transition-delay": "0s"});
        if (wpab.length) {
                mn.addClass(amns);
        }
    } else {
        nbm.css({"opacity": "0", "transition-delay": "0s"});
        mn.removeClass(mns);
        ni.removeClass(nis);
        nnp.css({"margin-left": "0", "transition-delay": "0.2s"});
        if (wpab.length) {
                mn.removeClass(amns);
        }
    }
}
myfunction();
$(window).scroll(myfunction);

Upvotes: 2

Related Questions