Fixed element scrolling

Question

The fixed element is scrolling with window scrolling.

body {
  background-color: #f3f7f9;
  /** I used perspective for some 3d animation purpose **/
  perspective: 1000px;
}

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background-color: #007711;
}

.content {
  height: 400px;
  width: 600px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  margin: 2rem auto;
}

<div id="sidebar">
  <h1>Am I Scrolling ?</h1>
</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>

the duplicate covers all the properties that break position:fixed including perspective — Temani Afif, May 15 '21 at 13:37
Not duplicate, I am very specific about this problem here. It will help anyone in the future, specifically about the position-fixed problems. Not worthless. — Tahazzot, May 15 '21 at 16:48

score 0 · Answer 1 · answered May 15 '21 at 13:25

The fixed element not work with perspective as its parent container.

This is a way to fix it by removing perspective from the body. If you need it use perspective as a container of your animation.

body {
  background-color: #f3f7f9;
}

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background-color: #007711;
}

.animation_container {
  /** I used perspective for some 3d animation purpose **/
  perspective: 1000px;
}

.content {
  height: 400px;
  width: 600px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  margin: 2rem auto;
}

<div id="sidebar">
  <h1>Am I Scrolling ?</h1>
</div>

<div class="animation_container">
  <!-- animation stuff -->
</div>

<div class="content"></div>
<div class="content"></div>
<div class="content"></div>

Fixed element scrolling

1 Answers1