Как объединить (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

Вы можете использовать $(window).width() с scrollTop(), как это, но не забывайте, используйте 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>

Попробуйте этот пример в текущем размере, а также нажмите на полную страницу!

Answer 2

Вам не нужны никакие проверки N px. Если все, что вам нужно, это:

Скрыть всплывающее окно, пока ElementY или ElementZ видны

все, что вам нужно, это intersectionObserver API ^MDN
и класс CSS, подобный .show, который будет отображать ваш #giveaway элемент.

Таким образом, вы надеваете Вам не нужно заботиться о мобильном или настольном компьютере или размещать магические числа c, например, жестко запрограммированные 2000, 500 и c ..., которые в любом случае могут различаться и приводить к ошибке в вашем приложении.

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 3

Вы можете создать переменную, которая устанавливает позицию триггера

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"});
}
});