Выполнить функцию на основе внутренней ширины окна

Question

Мне нужно запустить функцию (scrollTop), когда ширина окна равна или меньше примерно 500 пикселей, затем выполнить функцию scrollTop в операторе if для добавления класса в тег метки, но в этом случае ничего не работает: (

Вот код:

function screenClass() {
    if($(window).innerWidth() < 484) {
        //alert("500");
        function AddClass() {
            if ($(window).scrollTop() > 100) {
                $(".show-menu").addClass("sticky");
            } else {
                $(".show-menu").removeClass("sticky");
            }
        }

    }
}
$(window).bind("resize",function(){
    screenClass();
});

<label id="navbar" for="show-menu" class="show-menu">
<img class="icon l" src="/website/img/menu.png" /><img class="icon r" src="/website/img/menu.png" />
MENU
</label>

Это нужно, чтобы строка меню оставалась липкой при прокрутке страницы. Надеюсь на вашу помощь. Спасибо!

Answer 1

Вы определяете функцию AddClass(), но никогда не вызываете ее.Нет нужды определять функцию, просто делайте то, что делает функция.

Если вы хотите указать действие, которое должно происходить при прокрутке окна, оно должно быть внутри обработчика событий scroll.

function screenClass() {
  $(window).off("scroll");
  if ($(window).innerWidth() < 484) {
    $(window).on("scroll", function() {
      if ($(window).scrollTop() > 100) {
        $(".show-menu").addClass("sticky");
      } else {
        $(".show-menu").removeClass("sticky");
      }
    });
  }
}