Как сделать чтобы после прокрутки background уползал вниз?

Question

[fsociety_one]

Добрый день! Делаю сайт, стоит задача сделать так чтобы после прокрутки хотя бы на 50px, background-image уползал плавно вниз, как это можно сделать? (Background это рука с пакетом)
Код:
HTML

<header>
    <div class="wrap">
      <nav class="navbar navbar-light navbar-expand-lg">
    	<a class="navbar-brand" href="#">[phone]</a>
    	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
      	<span class="navbar-toggler-icon"></span>
    	</button>
    	<div class="collapse navbar-collapse" id="navbar1">
      	<ul class="navbar-nav ml-auto">
        	<li class="nav-item"><a class="nav-link" href="#about">О нас</a></li>
          <li class="nav-item"><a class="nav-link" href="#portfolio">Продукция</a></li>
          <li class="nav-item"><a class="nav-link" href="#price">Наши клиенты</a></li>
  		    <li class="nav-item"><a class="nav-link" href="#contact">Контакты</a></li>
        	</ul>
    	  </div>
      </nav>


      <h2 class="title">Ardoplast</h2>
      <div class="text">
        производство<br>
        полиэтиленовых<br>
        пакетов
      </div>
    </div>
  </header>

CSS:

header nav.navbar {
  font-size: 22px;
  font-weight: 500;
  padding: 40px 0 150px;
}

header .navbar-brand {
  font-size: 22px;
}

header .nav-link {
  color: black;
}

header li {
  padding: 15px;
}

header .show li {
  display: block;
  text-align: center;
  padding: 10px;
}

header a {
  position: relative;
}

header a::after {
  content: '';
  display: inline-block;
  position: absolute;

  width: 90%;
  height: 90%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);

  border: 1px solid #1049ba;
  opacity: 0;
  transition: 0.2s;
}

header a:not(.navbar-brand):hover::after {
  content: '';
  width: calc(100% + 15px);
  height: calc(100% + 15px);
  opacity: 100;
  border: 3px solid #1049ba;
  transition: 0.3s;
}


header .wrap {
  background: url('../img/hand.webp') no-repeat;
  background-position: 100% 0;
  padding-bottom: 200px;
}

header .title {
  position: relative;
  font-size: 55px;
  letter-spacing: 70px;
  margin-bottom: 50px;
  z-index: 10;
}

header .text {
  position: relative;
  margin-left: 35px;
  font-size: 36px;
  line-height: 75px;
  text-transform: uppercase;
  z-index: 10;
}

header .text::after {
  content: '';
  position: absolute;
  width: 78px;
  height: 71px;
  bottom: -25px;
  left: -36px;
  background: url('../img/dots.webp') no-repeat;
  z-index: -9;
}

header .title::after {
  content: '';
  position: absolute;
  width: 78px;
  height: 71px;
  top: -25px;
  left: 50%;
  background: url('../img/dots.webp') no-repeat;
  z-index: -9;
}

Answer 1

[Bobsans]

Сделайте класс при наличчи которого на элементе с фоном картинка будет за нижней границей экрана и добавьте transition. Далее повесьте на window событие onscroll, которое будет проверть window.pageYOffset, и если он больше 50px - к элементу добавлять вышеупомянутый класс, а если меньше - убирать.

Answer 2

[Анатолий Васильев]

background-attachment: fixed;