js помогите найти ошибку

Question

Есть вот такой код, задача которого при доскролливании до определенного элемента передать блоку нужные стили, и в обратную сторону. В консоль выводится значение скролла но дальше ничего не происходит при превышении значения переменной с сравниваемым значение.

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll);
});

if (scroll > 46){
  $('.flash_window').css("position","fixed");
  $('.flash_window').css("top","0");
} 
else{
    $('.flash_window').css("position","absolute");
    $('.flash_window').css("top","");
};

Примечательно что части кода что присваивают стили в другой части кода отрабатывают прекрасно. заранее спасибо! P.S. может подскажете как считать скролл от конкретного элемента а не от топа странницы?

Answer 1

У вас условие вне обработчика window.addEventListener("scroll" в связи с чем во второй части не происходит отслеживания скролла.
Для того, чтобы изменения стиля работали - добавьте его внутрь функции.
Пример:

$(window).on('scroll', function(){
  var scroll = this.scrollY;
  console.clear();
  console.log(scroll);

  if (scroll > 46){
    $('.flash_window').css({
      "position": "fixed",
      "top": "0",
      "background": "blue"
    });
  } else {
    $('.flash_window').css({
      "position": "absolute",
      "top": "",
      "background": "red"
    });
  };
});

body {
  margin: 0;
  height: 400vh;
}

.flash_window {
  display: block;
  width: 100%;
  height: 50px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="flash_window"></div>

БЛОГ НА HUSL

js помогите найти ошибку

Ответы (1 шт):