Transition of a div from relative to fixed when using display: flex;-CodePudding

I'm trying to play with having a page which has a few full height/width pieces of content, and the very first view has a heading. As you start to scroll, the heading decreases in size and transitions to a new position in a sticky header at the top of the page. I've tried to do this here: https://codepen.io/ady-coding/pen/BaZgrqM

I managed to get it to sort of work, but as soon as I set the parent div to use flex so that I can position the heading nicely in the centre of the screen, the transition doesn't work properly and simply jumps to its new position. Any ideas where I'm going wrong?

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

function myFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("page-heading").className = "fixed-header";
  } else {
    document.getElementById("page-heading").className = "page-name";
  }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#content-1 {
  width: 100vw;
  height: 100vh;
  background-color: green;
  display: flex;
  justify-content: center;
}

#content-2 {
  width: 100vw;
  height: 100vh;
  background-color: purple;
}

#content-3 {
  width: 100vw;
  height: 100vh;
  background-color: blue;
}

.page-name {
  position: relative;
  background-color: pink;
  margin: auto 0;
  transition: all 0.3s ease-in;
  padding: 0 200px;
  font-size: 40px;
}

.body-copy {
  position: relative;
  top: 50%;
  background-color: white;
  margin: 0 auto;
  text-align: center;
  width: 400px;
}

.fixed-header {
  position: fixed;
  top: 10px;
  left: 0px;
  background-color: pink;
  margin: auto 200px;
  transition: all 0.3s ease-in;
}

<div id="container">
  <div class="row">
    <div class="col">
      <div id="content-1">
        <div id="page-heading" class="page-name">
          Projects
        </div>
      </div>
      <div id="content-2">
        <div class="body-copy">
          This is some other content
        </div>
      </div>
      <div id="content-3">
        <div class="body-copy">
          This is some other content
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Would it be a problem if page-heading was position fixed from the start? I also added top 40vh.

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

function myFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("page-heading").className = "fixed-header";
  } else {
    document.getElementById("page-heading").className = "page-name";
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#content-1 {
  width: 100vw;
  height: 100vh;
  background-color: green;
  display: flex;
  justify-content: center;
}

#content-2 {
  width: 100vw;
  height: 100vh;
  background-color: purple;
}

#content-3 {
  width: 100vw;
  height: 100vh;
  background-color: blue;
}

.page-name {
  position: fixed;
  background-color: pink;
  margin: auto 0;
  top: 40vh;
  transition: all 0.3s ease-in;
  padding: 0 200px;
  font-size: 40px;
}

.body-copy {
  position: relative;
  top: 50%;
  background-color: white;
  margin: 0 auto;
  text-align: center;
  width: 400px;
}

.fixed-header {
  position: fixed;
  top: 10px;
  background-color: pink;
  margin: auto 200px;
  transition: all 0.3s ease-in;
}

<div id="container">
  <div class="row">
    <div class="col">
      <div id="content-1">
        <div id="page-heading" class="page-name">
          Projects
        </div>
      </div>
      <div id="content-2">
        <div class="body-copy">
          This is some other content
        </div>
      </div>
      <div id="content-3">
        <div class="body-copy">
          This is some other content
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Thanks for the advice. So I see that I can't really transition from different position states. Instead I've tackled it by using your suggestion of having the content set to fixed and instead transitioning the size of the container, and the font size and that seems to have done the trick.

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

function myFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("header").className = "fixed-header";
  } else {
    document.getElementById("header").className = "header";
  }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.header {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: orange;
  display: flex;
  transition: all 0.3s ease-in;
}

#content-1 {
  width: 100vw;
  height: 100vh;
  background-color: green;
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;
}

#content-2 {
  width: 100vw;
  height: 100vh;
  background-color: purple;
}

#content-3 {
  width: 100vw;
  height: 100vh;
  background-color: blue;
}

.page-name {
  background-color: pink;
  margin: auto 0;
  transition: all 0.3s ease-in;
  padding: 0 200px;
  font-size: 40px;
}

.body-copy {
  position: relative;
  top: 50%;
  background-color: white;
  margin: 0 auto;
  text-align: center;
  width: 400px;
}

.fixed-header {
  position: fixed;
  transition: all 0.3s ease-in;
  height: 100px;
  width: 100vw;
  background-color: orange;
  display: flex;
  z-index: 1;
}

.fixed-header h1 {
  font-size:20px;
  transition: all 0.3s ease-in;
  
}

<div id="container">
  <div class="row">
    <div class="col">
       <div id="header" class="header">
         <div id="page-heading" class="page-name">
           <h1>Projects</h1>
         </div>
       </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div id="content-1">
        
      </div>
      <div id="content-2">
        <div class="body-copy">
          This is some other content
        </div>
      </div>
      <div id="content-3">
        <div class="body-copy">
          This is some other content
        </div>
      </div>
    </div>
  </div>
</div>