<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. 😀
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;
}
Place the
it does work, tested it using the dev console to drag the div below the preloader but this page is on Vue.js. so i can only control elements inside the app div. so the preloader part is static on the index.html so this solution really doesnt help.
also when i do this. the morph-wrap div is above most of the content on the page including the footer. any other work around?
really sorry didnt attach the html. thought it would be extra nested and tedious to go through
No worries! You can eliminate unnecessary HTML that aren’t related to your issue to keep it from getting too long. Or, provide a simple example of your HTML structure so we have an idea of what could be wrong.
i have the router-view nested inside the div#main which had the component containing the morph-wrap and content-wrap divs. so to place the morph-wrap div outside the router-view would be a problem
Something is adding