Transition effect is not working properly

Question

Transition doesn't work, I want to achieve the smooth effect on scroll. I'm using the JS script below, the script is working. However, CSS transition is not.

Any help is appreciated!

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 550 || document.documentElement.scrollTop > 550) {
    document.getElementById("header").style.height = "70px";
    document.getElementById('classic-logo').style.display = "none";
    document.getElementById('minifyed-logo').style.display = "block";

  } else {
    document.getElementById("header").style.height = "100px";
    document.getElementById('minifyed-logo').style.display = "none";
    document.getElementById('classic-logo').style.display = "block";
  }
}

#header {
  position: fixed;
  width: 100%;
  height: 100px;
  transition: 0.3s;
}

<header id="header">
  <!-- Content -->
</header>

Weird choice by Paulie D; the "duplicate" question is not particularly helpful for addressing the problem in this question. This question should probably closed for a different reason, though, so I won't vote to reopen. — Brilliand, Jun 02 '21 at 21:23

score 1 · Answer 1 · answered Jun 02 '21 at 21:19

You need to add a second property to transition, in this case height.

window.onscroll = scrollFunction;

function scrollFunction() {
  if (document.body.scrollTop > 550 || document.documentElement.scrollTop > 550) {
    document.getElementById("header").style.height = "70px";
    document.getElementById('classic-logo').style.display = "none";
    document.getElementById('minifyed-logo').style.display = "block";

  } else {
    document.getElementById("header").style.height = "100px";
    document.getElementById('minifyed-logo').style.display = "none";
    document.getElementById('classic-logo').style.display = "block";
  }
}

scrollFunction();

body {
  min-height: 1000px;
}

#header {
  position: fixed;
  width: 100%;
  height: 100px;
  transition: 0.3s height;

  background-color: green;
  color: white;
}

<header id="header">
  <div id="classic-logo">Classic</div>
  <div id="minifyed-logo">Minifyed</div>
</header>

score 0 · Answer 2 · answered Jun 02 '21 at 21:18

0

You need to specify which properties to transition on:

#header {
  position: fixed;
  width: 100%;
  height: 100px;
  transition: height 0.3s;
}

answered Jun 02 '21 at 21:18

Brilliand

13,404
6
46
58

Transition effect is not working properly

2 Answers2