如何将 (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"});
}
});

因此，换句话说，#giveawaydiv在页面上的位置稍低一些。我已经查看并试验了if (screen.width < xxx) {，因为我相信它是我正在寻找的大致功能，但是JS新手，我不确定如何将其放入上述脚本中。有没有办法让if screen.width与上述脚本协同工作，以便当屏幕分辨率较大时，脚本会正常触发，但是当我们的屏幕尺寸为if (screen.width < 900)时，div 会显得更低？

Answer 1

你不需要任何 N px 检查。 如果您只需要：

在元素Y或元素Z可见时隐藏赠品弹出窗口

您所需要的只是 intersectionObserver API^MDN
和一个像.show这样的 CSS 类，它们将查看您的#giveaway元素。

这样，您就不必关心移动或桌面，也不必放置诸如硬编码的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>

Answer 2

您可以创建一个设置触发器位置的变量

var heightToShowPanel = screen.width < 900 ? 500 : 10

然后在条件中使用它而不是固定数字

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

Answer 3

你可以像这样scrollTop()一起使用$(window).width()，但不要忘记，使用else，不要每次都重复if。

$(window).scroll(function() {
let WindowWidth = $(window).width();
let scrollTop = $(this).scrollTop();
let el = $("#giveaway");
if (WindowWidth > 750) { // screen bigger than 750px
if (scrollTop < 10) {
console.log('less than 10px') // less than 10px
el.css({
"position": "fixed",
"bottom": "-100px"
});
} else if (scrollTop > 2000) {
console.log('bigger than 2000px') // bigger than 2000px
el.css({
"position": "fixed",
"bottom": "-100px"
});
} else {
console.log('bigger than 10px') // bigger than 10px
el.css({
"position": "fixed",
"bottom": "0"
});
}
} else {
// screen less than 750px
if (scrollTop < 500) {
console.log('less than 500px') // less than 500px
el.css({
"position": "fixed",
"bottom": "-100px"
});
} else if (scrollTop > 2000) {
console.log('bigger than 2000px') // bigger than 2000px
el.css({
"position": "fixed",
"bottom": "-100px"
});
} else {
console.log('bigger than 500px') // bigger than 500px
el.css({
"position": "fixed",
"bottom": "0"
});
}
}
});

body {
height: 3000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="giveaway-wrapper">
<div id="giveaway-background">
<div id="giveaway" class="content">
<h3>...lorem ipsum...</h3>
</div>
</div>
</div>

在当前大小下尝试此示例，然后单击整页！