CODEWITHSUNDEEP
javascriptjquery
kold-kreator
kold-kreator

Reputation: 199

Navbar change on scroll and on window load or resize

I have this issue that I'm not being able to work correctly.

I have a navbar that must change on scroll(this part works fine) but it must also change when window/viewport is < 991px.

It actually does work, but I must scroll to apply the effect. Here's my code:

    $(document).ready(function()
    {
      var $navbar = $('.navbar');
      // ----------
      $(function()
      {
        $(window).scroll(function()
        {
          if(($(window).scrollTop() > 60 && $(window).on('load resize').width() > 992) || ($(window).on('load resize').width() < 992))
          {
            $navbar.addClass("compressed");
          }
          else
          {
            $navbar.removeClass("compressed");
          }
        });
      });
    });

If I shrink the broswer, nothing happens. At the first scroll, it works correctly. How should I trigger it when load or resize the window?

Thanks!

Upvotes: 0

Views: 88

Answers (1)

Robin Zigmond
Robin Zigmond

Reputation: 18249

Just replace this:

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

with this:

$(window).on("load scroll resize", function() {...});

That will result in the function being called on any of the listed events.

Upvotes: 1

Related Questions