Блог

Главная - Вопросы по программированию - jQuery прокрутите, пока не после

jQuery прокрутите, пока не после

#javascript #jquery

Вопрос:

Я хочу создать скрипт, который изменяет размер div в зависимости от его положения. Как поток прикрытия.

Я использую метод jQuery scroll (), но он запускается только ПОСЛЕ прокрутки, а не во время прокрутки. Это приводит к смещению эффекта вверх или вниз.

Я также попробовал интервал, но это еще хуже.

Есть ли способ сделать это более «реальным»?

 $(window).scroll(function() {

  windowOffset = $(window).scrollTop();
  windowMiddle = $(window).height() / 2;

  $('li').each(function() {
    offset = Math.abs(windowMiddle - $(this).position().top   windowOffset);
    $(this).text(offset);
    $(this).css({
      width: 700 - offset
    });
  });

}); 
 body {
  margin: 0;
  padding: 0;
}

.scroll {
  position: absolute;
  display: block;
  width: 100%;
}

ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: block;
  margin: auto;
  width: 300px;
  height: 70px;
  background: yellow;
  margin-bottom: 20px;
  transition: all .25s;
  text-align: center;
  line-height: 70px;
  font-size: 50px;
}

.helper {
  display: block;
  position: fixed;
  width: 100%;
  top: 50%;
  left: 0%;
  background: red;
  height: 1px;
} 
 <!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="helper">

  </div>
  <div class="scroll">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

</html>

Комментарии:

1. Убери свой transition: all .25s; . Это откладывает дело.

Ответ №1:

Я удалился transition: all .25s; . Это тот эффект, которого вы хотите?

 $(window).scroll(function() {

  windowOffset = $(window).scrollTop();
  windowMiddle = $(window).height() / 2;

  $('li').each(function() {
    offset = Math.abs(windowMiddle - $(this).position().top   windowOffset);
    $(this).text(offset);
    $(this).css({
      width: 700 - offset
    });
  });

}); 
 body {
  margin: 0;
  padding: 0;
}

.scroll {
  position: absolute;
  display: block;
  width: 100%;
}

ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: block;
  margin: auto;
  width: 300px;
  height: 70px;
  background: yellow;
  margin-bottom: 20px;
  /*transition: all .25s;*/
  text-align: center;
  line-height: 70px;
  font-size: 50px;
}

.helper {
  display: block;
  position: fixed;
  width: 100%;
  top: 50%;
  left: 0%;
  background: red;
  height: 1px;
} 
 <!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="helper">

  </div>
  <div class="scroll">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

</html>
Метки: ,