如果 div 与页面顶部有偏移，则添加类

Question

当偏移距顶部 25 像素时，我的主菜单将“滚动”类添加到“.mainMenu”。这个功能很好，但是当用户在页面顶部以外的任何地方刷新页面时，'.scroll' 不活动，因此'scroll' 样式不适用。

用例：

• 用户在页面顶部，向下滚动，添加“.scroll”类，将白色背景变为黑色。
• 用户在页面中间刷新窗口。由于未添加滚动，主菜单变回白色背景。

我正在寻找类似的内容：'如果 mainMenu 类距页面顶部 25px，则将类滚动添加到 mainMenu 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");
  }
});