Question

0

263

Views

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

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>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-12T03:48:54.359Z

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>

Answer 2 · 2022-07-12T03:48:54.367Z

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>

0

263

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

2 answers

0

0

Find remote jobs

Andres GPT