CSS make DIV position fixed inside DIV with PERSPECTIVE propertie

Question

i have a problem for getting #fixed with position:fixed relative to #container

check this fiddle out : https://jsfiddle.net/a1zogh

Answer 1

Here is my solution. I'm not exactly sure of all math details in it, but it looks quite robust to resizing of the window.

The main trick is to put the header so far away and make it so big, that movements of the viewport do not affect it's position much - think about moon on the sky, which is big and far away, and thus your movements of the head do not affect it's position.

body{
  margin:0; /* without it your container will not cover full body */
}
#container {
    width:100vw; /* probably 100% would be ok here */
    height:100vh; /* 100% would not be ok here, 
                     as we need to center perspective viewport 
                     w.r.t. screen- not w.r.t. whole long page content */
    /* this makes math easier to me */
    perspective:1px; 
    perspective-origin:0 0;
    /* we want container to be a window through which you watch
       the scrolling world */
    overflow-y:scroll;
    /* we don't want scrollbar at the bottom, as it would again force
       us to use calc for perspective-origin-y.
       Frankly, I do not know why the scrollbar appears at all */
    overflow-x:hidden;
    /* This is to allow positioning of layers relatively to container*/
    position:relative;
}

.parallaxBase {
    width:100%; 
    position:absolute;
    top:200px;  
 }

.parallaxBack {
    height:100vh;
    /* The general formula to keep size intact is scale(perspective-z)
       so in our case it is scale(1+1) */
    transform:translateZ(-1px) scale(2);
    transform-origin: 0 0;
}

#background {background:red; height:200px; padding-top:100px; }
#content {background:yellow; }
#fixed {background:green; 
  width:100%; 
  height:40px; 
  /* this is not so much to make it sticky,
     it is rather to not push the parallaxBack div lower,
     and to make sure that header is not occluded by elements
     which have position:absolute like parallaxBase,
     as even z-index:1 won't help you if you have position:static
      */
  position:absolute; 
  top:0px; 
  z-index:1;
  /* Now the main idea:
     we push the navbar 1023px to the back, but at the same time,
     we make it (1023+1) times bigger, which makes it appear in
     original size.*/
  transform: scale(1024) translateZ(-1023px);
  transform-origin: 0 0;
 }

  
this is fixed // why not fixed?
  

    
 this is parallax
  
  

    

  this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content
  this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content
    
  

You might want to play with it in https://jsfiddle.net/7L8ndtuv/2/

I also recommend reading https://developers.google.com/web/updates/2017/03/custom-scrollbar which inspired my answer.