javascript - 如何将 (screen.width < X) 与 $(window).scroll(function() 合并

Question

我有一个在叠加层中弹出的脚本 div当您向下滚动几个像素时，会出现在页面底部，然后在到达页面底部时将其删除。

$(window).scroll(function() {
if ($(this).scrollTop() < 10){
    $("#giveaway").css({"position": "fixed", "bottom": "-100px"});
}
if ($(this).scrollTop() > 11){
    $("#giveaway").css({"position": "fixed", "bottom": "0"});
}
if ($(this).scrollTop() > 2000){
    $("#giveaway").css({"position": "fixed", "bottom": "-100px"});
}
});

所以当你向下滚动过去 11px 时，脚本显示 #giveaway div 一段时间，然后将其删除到页面下方 2000px 左右.

问题是，这涵盖了较小分辨率的一个重要元素。对于较小的分辨率，我希望 div 显示得更靠下一点。因此，对于屏幕宽度小于 750px 的情况，我想要，例如:

if ($(this).scrollTop() < 500){
    $("#giveaway").css({"position": "fixed", "bottom": "-100px"});
}
if ($(this).scrollTop() > 501){
    $("#giveaway").css({"position": "fixed", "bottom": "0"});
}
if ($(this).scrollTop() > 2000){
    $("#giveaway").css({"position": "fixed", "bottom": "-100px"});
}
});

所以，换句话说，对于 #giveaway div 位于页面下方一点。我查看并尝试了 if (screen.width < xxx) { ，因为我相信这是一个符合我正在寻找的功能，但对 JS 来说是个新手。 ，我不太确定如何将其放入上面的脚本中。有没有办法拥有if screen.width与上面的脚本协同工作，这样当屏幕分辨率较大时，脚本会正常触发，但当我们的屏幕尺寸为 if (screen.width < 900) 时，脚本会正常触发。 ，div 出现在下方？

Answer 1

您不需要任何 N px 检查。如果您需要的是:

Hide the giveaway popup while ElementY or ElementZ are visible

您所需要的只是 intersectionObserver API^MDN
以及像 .show 这样的 CSS 类，它将带入您的 #giveaway 元素的 View 。

这样，您就不必关心移动设备或桌面设备，也不必放置像硬编码的 2000、500 等这样的神奇数字...... - 这些数字无论如何都可能会有所不同并导致您的应用程序出现错误。

const EL_give = document.querySelector('#giveaway');
const EL_head = document.querySelector('#header');
const EL_foot = document.querySelector('#footer');

function giveawayHandle(entries) {
  const isIn = entries.some(entry => entry.isIntersecting);
  EL_give.classList.toggle('show', !isIn);
}

const giveaway_observer = new IntersectionObserver(giveawayHandle);
giveaway_observer.observe(EL_head);
giveaway_observer.observe(EL_foot);

/*QuickReset*/* {margin: 0;box-sizing: border-box;}
body {font: 14px/1.4 sans-serif; border: 4px dashed #000;}

#header { background: #b0f; padding: 20px; }
#main   { background: #eee; padding: 20px; height: 200vh; }
#footer { background: #f0b; padding: 20px; height: 30vh; position: relative; }

#giveaway {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #0bf;
  padding: 40px 20px;
  transition: transform 0.4s;
  transform: translateY(100%); /* DEFAULT HIDDEN */
}

#giveaway.show {
  transform: translateY(0%);   /* SHOW IF JS SAYS SO */
}

<div id="header">HEADER (Hide giveaway while I'm visible)</div>
<div id="main">Scroll Down...</div>
<div id="giveaway">GIVEAWAY!</div>
<div id="footer">IMPORTANT FOOTER (Hide giveaway while I'm visible)</div>