Если div имеет смещение от верхней части страницы, добавьте класс

Question

Мое главное меню добавляет класс 'scroll' в '.mainMenu', когда смещение составляет 25 пикселей сверху. Это работает нормально, но когда пользователь обновляет страницу в любом месте, кроме верхней части страницы, «.scroll» не активен, поэтому стили «прокрутки» не применяются.

Вариант использования:

• Пользователь находится вверху страницы, прокручивает вниз, добавляется класс '.scroll', превращая белый фон в черный.
• Пользователь обновляет окно в середине страницы. Главное меню снова превращается в белый фон, потому что прокрутка не добавлена.

Я ищу что-то вроде: «Если класс mainMenu имеет 25 пикселей от самой верхней части страницы, то добавьте классвыделите главное меню div '.

Демонстрация:

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= 10) {
    $(".mainMenu").addClass("scroll");
  } else {
    $(".mainMenu").removeClass("scroll");
  }
});

.gap{
  height: 800px;
}

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}
ul li{
  padding: 0px 20px;
}

.mainMenu{
  transition: background 0.5s; 
}

.mainMenu.scroll {
	background:red;
	z-index: 9999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="mainMenu">
  <ul>
    <li>link 1</li>
    <li>link 1</li>
  </ul>
</div>

<div class="gap"></div>

Answer 1

Просто используйте тот же код, который вы используете для примера (вариант использования 1), но с другим событием.

Вот так:

$(function() { // called when page is refreshed

  var scroll = $(window).scrollTop();

  if (scroll >= 10) {
    $(".mainMenu").addClass("scroll");
  } else {
    $(".mainMenu").removeClass("scroll");
  }
});