CODEWITHSUNDEEP
javascripthtmlcssreactjs
Dylan Bozarth
Dylan Bozarth

Reputation: 1694

Fixed element not remaining fixed with parallax scrolling

I am creating a page that is a slideshow with several images and a parallax scrolling effect. The scrolling is working fine, however I want to have the buttons for the music control fixed on the top, however the buttons will not stay fixed no matter what I do.

My images are set up like this:

.first {
  display: flex;
 
  position: relative;
  z-index: -1;
  height: 100vh;
  justify-content: center;
  align-items: center;
  transform: translateZ(-1px) scale(2);
background-image: url('./orange.png');
background-size: 100% 100%;

}

And my header is called 'dock' and has the following code:

<div className="  dock">
    {" "}
    <button className="button" onClick={Playit}>
      Play Audio
    </button>{" "}
 
    <button className="button2" onClick={Stopit}>
      Pause Audio
    </button>
  </div>
CSS 
.dock {
 top: 0;
  text-align: center;
  z-index: 99;
position: fixed !important;
}

This is my first time working with any kind of scroll effects. I am unsure why the two buttons on the top will not remain fixed.

A codesandbox is available here.

Upvotes: 0

Views: 61

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

The position: fixed has a slightly different purpose. If you need a fixed element inside a container then better use position: sticky instead of position: fixed. Just add these rules to .dock selector:

position: sticky
top: 0
z-index: 9999

As here:

.dock {
  background-color: red;
  align-items: center;
  justify-content: center;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 9999;
}

Upvotes: 1

stealththeninja
stealththeninja

Reputation: 3791

I am unsure why the two buttons on the top will not remain fixed.

Moving the music controls out of the 3d app container will respect the fixed positioning.

As for "why" (from MDN):

fixed

...It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. [emphasis mine]

header {
  position: fixed;
  width: 100vw;
  background: bisque;
}

.app {
  perspective: 1px;
  transform-style: preserve-3d;
}

.box {
  height: 100vh;
  border: 4px solid lavender;
  text-align: center;
  vertical-align: center;
}
<header><button>Play me</button></header>
<section class="app">
  <div class="box">Thing 1</div>
  <div class="box">Thing 2</div>
  <div class="box">Thing 3</div>
</section>

Upvotes: 1

Related Questions