# Scroll a div while background remains fixed

**URL:** https://forum.kirupa.com/t/scroll-a-div-while-background-remains-fixed/650263
**Category:** web dev
**Created:** [December 31, 2021, 3:30am UTC](https://forum.kirupa.com/t/scroll-a-div-while-background-remains-fixed/650263 "2021-12-31T03:30:14Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)
#### Post date: [December 31, 2021, 3:30am UTC](https://forum.kirupa.com/t/scroll-a-div-while-background-remains-fixed/650263/1 "2021-12-31T03:30:14Z")

</div>

I’ve been playing around with some frontdnd development recently using Svelte and SvelteKit. I’m struggling with an effect that I know I’ve seen before but I don’t know what it’s called so it’s hard to Google it (some specific type of parallax?). I have a hero image covering the first section of the page, as the user starts scrolling I want the image to fade out to reveal the content without the content scrolling away until the image is finally gone then the body can resume normal scroll behaviour.  
I think I’m about half way there I’ve attached a gif if that helps to clarify the effect.  
 ![screencast 2021-12-30 22-17-41](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/b/7/b776e098cd74c7b380b4c0993c92e3595414a764.gif)

I’ve accomplished this by getting the window height, the scroll position then doing some math on those numbers to dynamically set the `opacity` and `transform` of the image. The div below stays in place because I have the style set to `position: fixed;` until the image is gone. This is where things break, once I set `position: relative` the div jumps back to the top of the page, how can I accomplish this?

* * *

For additional context I’m including my code:

```svelte
 // this is the function that runs when scroll is detected
	const scroller = () => {
		scroller_value = scrolly/height
		opacity = (ONE) - scroller_value
		if(scrolly > height - 30){
			background_scroll = "position: relative"

		} else {
			background_scroll = "position: fixed"
		}
	}
</script>
# this is how svelte binds events and values to the above variables in the function
<svelte:window bind:scrollY={scrolly} bind:innerHeight={height} on:scroll={scroller}/>

<div class="intro-container">
	<div class="intro">
	   <div class="image" style="opacity: {opacity}; transform: scale({1 * 1 + scroller_value})" />
	</div>
</div>
<div class="bg-page" />
<div class="scroller" style={background_scroll}>
content 
</div>

<style>
	.intro-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;
		color: var(--main-heading);
	}

	.intro {
		position: relative;
		height: 200vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bg-page {
		position: absolute;
		height: 200vh;
		width: 100vw;
		left: 0;
		top: 0;
		bottom: 0;

	}
</style>

```

PS. I’m sure if I was using React there would be a billion plugins to do this (again it would help if I knew what it was called) but in Svelte land things are a little more sparse for now.