Javascript scroll addClass

Question

我希望我的导航栏在页面的顶部和底部是透明的，但我希望它在中间不是透明的。当我的网页全屏显示时，这是可行的：

$(window).on("scroll", function () {
    if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
        $(".nav").addClass("active");
    } else {
        $(".nav").removeClass("active");
    }
})

但当它被调整大小时，这将不再起作用，因为大小发生了变化。有没有一种方法可以用%代替普通数字，这样它就会有响应？

Answer 1

这是因为您对高度值进行了硬编码。检查整个站点高度，将其一分为三，并将此变量合并到if语句中。每次你调整浏览器窗口的大小，它都会重新计算你的新位置。

window.addEventListener('resize', function() {
  //one third and two third of website
  oneThird = window.scrollHeight / 3;
  twoThird = onethird * 2;

  if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
      $(".nav").addClass("active");
  } else {
      $(".nav").removeClass("active");
  }
}

Answer 2

你也可以在JS中使用媒体查询，这样你就可以对你想要的窗口大小做某些事情，这可能会对https://www.w3schools.com/howto/howto_js_media_queries.asp有所帮助