javascript - 滚动标题

Question

我需要更改 header 的样式，但是如果条件不起作用并且仅在我的控制台中记录(false)并且不更改任何内容，所以我想知道我的语法或我的语法是否有问题逻辑。请注意，我的控制台没有错误。

$(document).ready(function() {
  var header = $(".hotel-header");
  var scroll = $(window).scrollTop();
  if (scroll >= 200) {
    header.addClass("hotel-header-scroll");
    console.log("true");
  } else {
    header.removeClass("hotel-header-scroll");
    console.log("false");
  }
});

Answer 1

当您在文档准备就绪时运行此方法时，会出现错误，因为当页面加载时标题滚动小于 200，因此其他条件运行。我改了$(document).ready(function()至 $(window).scroll(function()当用户滚动页面时调用此函数。然后调用该方法，它将检查滚动并根据您的条件返回 true 或 false。下面是工作示例

$(window).scroll(function() {
  var header = $(".hotel-header");
  var scroll = $(window).scrollTop();
  if (scroll >= 200) {
    header.addClass("hotel-header-scroll");
    console.log("true");
  } else {
    header.removeClass("hotel-header-scroll");
    console.log("false");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hotel-header"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>hi</h1>

添加了 <br>用于滚动某些内容。