CODEWITHSUNDEEP
javascripthtmlcss
Shubham Gupta
Shubham Gupta

Reputation: 59

keep background div fixed while allowing another div to scroll over it as an overlay

so i have an svg morph animation using anime.js and scrollmonitor as a background div while another div which has content of the page is to scroll over the fixed background div. but it isnt working as expected. the background div doesn't stay fixed as the background and scrolls down with the overlay div.

kindly help out with this. i am clueless so as to what i am missing out. here is the link to the website

https://esselion.com/passapp/#/

.morph-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1000;
}

.content-landing-wrap{
    position: relative;
    z-index: 1100;
    overflow-y: auto;
}

Upvotes: 0

Views: 1045

Answers (1)

Julie Xiong
Julie Xiong

Reputation: 150

<div class="morph-wrap"> is fixed relative to its parent container. If you move <div class="morph-wrap"> outside of <div id="main">, it will remain fixed as you scroll.

<div id="content-scroll">
  <div class="morph-wrap"></div>
  <div id="main"></div>
</div>

Include your HTML next time so we don't have to inspect your website. It will help us help you. :D

Upvotes: 2

Related Questions