1

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

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. может подскажете как считать скролл от конкретного элемента а не от топа странницы?

1 ответ 1

3

У вас условие вне обработчика 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>

1
  • Большое спасибо! Успел посмотреть до изменения. Без jQuery сейчас никуда) был подключен. На самом деле игрался с этим но не получалось. Сейчас понял что забыл window в () взять, еще раз большое спс! И все-таки есть простой способ считать скролл от элемента? 14 фев 2020 в 15:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.