wysokość diva zależna od scrolla

Question

Witam, próbuje zrobić program, który zmieniałby wysokość diva podczas scrollowania strony, mam mały problem utworzyłem zmienna globalna gdzie wartość będzie powiększana z każdym scrollem. Niestety efekt jest taki, że zmienna "vh" cały czas ma wartość 0. Może mi ktoś wytłumaczyć, gdzie jest błąd?

  <script>
      document.body.style.height = 10000 + "px";
      const divEl = document.createElement("div");
      document.body.appendChild(divEl);
      let vh = 0;
      divEl.style.cssText =
        "width:100%;position:fixed;top:0;left:0;background-color:green;height: " +
        vh +
        "px";
      function changeHeight() {
        vh += 1500;
        if (window.innerHeight / 2 <= vh) {
          vh -= 1000;

          divEl.style.backgroundColor = "red";
        }
      }
      window.addEventListener("scroll", changeHeight);
    </script>

 

Comments

Może spróbuj użyć w obliczeniach window.pageYOffset 

 [ on-line ]

div {
  --height: 0;
  height: calc(var(--height) * 1px);
  
  ...
}

...

function changeHeight() {
  ...
  divEl.style.setProperty('--height', window.pageYOffset);
}

window.addEventListener("scroll", changeHeight);

 

Answer 1

To, że zmieniasz wartość zmiennej vh to jedno, ale powinieneś też aktualizować styl height za każdym razem, bo on się sam nie zmieni (przynajmniej nie w Twoim kodzie). Zatem:

divEl.style.backgroundColor = "red";
divEl.style.height = `${vh}px`;

Comments

Dziękuje za wyjaśnienie, czyli nie ma innej opcji poza przypisywaniem zmiennej vh do wysokości?;)

---

Możesz skorzystać ze zmiennej CSS, wtedy będziesz aktualizować tylko samą wartość, już bez konkatenacji z jednostką.

---

@ScriptyChris, 

aktualizować tylko samą wartość, już bez konkatenacji z jednostką.

jestem ciekaw jak to zaimplementować w js np. na tym przykładowym kodzie

div {
  --height: 0vh;
  height: var(--height);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color:green;  
}

document.body.style.height = 10000 + "px";
const divEl = document.createElement("div");
document.body.appendChild(divEl);
let vh = 0;

function changeHeight() {
  divEl.style.backgroundColor = "red";
  // divEl.style.setProperty('--height', (++vh) + 'vh');
  divEl.style.setProperty('--height', ++vh);
  //console.log(vh);
}
window.addEventListener("scroll", changeHeight);

 

---

Na oko, sama zmienna --height powinna mieć tylko wartość (którą JS modyfikuje), a już jej przypisanie do property height powinno dopisywać jednostkę (poprzez mnożenie w calc), czyli:

  --height: 0;
  height: calc(var(--height) * 1vh);

 

---

Czyli jednak jest w pewnym sensie wykonywana konkatenacji z jednostką, ale na poziomie css-a, poprzez użycie calc.

---

Tak, AFAIK powinno dać się niejako zamaskować konkatenację przy użyciu @property w CSS, ale gdzieś musi być ten moment, że sama wartość otrzymuje jednostkę.

---

Jeszcze chciałem zapytać o jedną rzecz, generalnie nie działa mi warunek else if(divEl.style.height == 0) w poniższym kodzie, wiecie może dlaczego? Jeśli zrobię else if(vh == 0) wtedy wszystko jest ok.

<script>
      document.body.style.height = 10000 + "px";
      const divEl = document.createElement("div");
      document.body.appendChild(divEl);
      let vh = 0;
      let check = true;
      divEl.style.cssText =
        "width:100%;position:fixed;top:0;left:0;background-color:green;height: " +
        vh +
        "px";
      function changeHeight() {
        if (check) {
          vh += 10;
          divEl.style.height = `${vh}px`;
        } else {
          vh -= 10;
          divEl.style.height = `${vh}px`;
          divEl.style.backgroundColor = "red";
        }
        if (window.innerHeight / 2 <= vh) {
          check = false;
        } else if (vh == 0) {
          check = true;
        }
      }
      window.addEventListener("scroll", changeHeight);
    </script>

 

---

Zobacz co zwraca divEl.style.height

document.body.style.height = 10000 + "px";
const divEl = document.createElement("div");
document.body.appendChild(divEl);
let vh = 0;
let check = true;
divEl.style.cssText =
  "width:100%;position:fixed;top:0;left:0;background-color:green;height: " +
  vh +
  "px";
function changeHeight() {
  if (check) {
    vh += 10;
    divEl.style.height = `${vh}px`;
  } else {
    vh -= 10;
    divEl.style.height = `${vh}px`;
    divEl.style.backgroundColor = "red";
  }
  if (window.innerHeight / 2 <= vh) {
    check = false;
  } else if (vh == 0) {
    check = true;
  }
  
  console.clear();
  console.log('height: ' + divEl.style.height)
  console.log('vh: ' + vh);
}
window.addEventListener("scroll", changeHeight);

 

i zadaj sobie Sam pytanie jeszcze raz dlaczego nie działa 

if (divEl.style.height == 0) ...

 

spróbuj np. z takim zapisem parseInt(divEl.style.height)

---

Fakt, zgapiłem się. Dziękuje jeszcze raz ;)