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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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