aendra-rininsland/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
body {
  height: 5000px;
  margin: 0;
  padding: 0;
}

#root-bounds {
  background: yellow;
  position: fixed;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#scrolled {
  position: absolute;
  top: 1000px;
  left: 0;
  width: 100%;
  height: 50px;
  background: chartreuse;
}

#scrolled.active {
  background: magenta;
}


  </style>
</head>

<body>
  <div id="root-bounds"></div>
  <p>Scroll down...</p>
  <div id="scrolled"></div>
  <script>
const rootMargin = "200px 0px"; // This appears to do fuck-all
const negativeRootMargin = "-200px 0px"; // Meanwhile, negative works?

const rootBoundsOverlay = document.getElementById('root-bounds');
rootBoundsOverlay.style.margin = rootMargin;

const scrolled = document.getElementById('scrolled');

const i = new IntersectionObserver((intersected, io) => {
  console.dir(intersected);
  const [item] = intersected;
  if (item.isIntersecting) {
    scrolled.classList.add('active');
  } else {
    scrolled.classList.remove('active');
  }
}, {
  threshold: 0,
  rootMargin: negativeRootMargin,
});

i.observe(scrolled);
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	height: 5000px;
	margin: 0;
	padding: 0;
	}

	#root-bounds {
	background: yellow;
	position: fixed;
	width: auto;
	height: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	}

	#scrolled {
	position: absolute;
	top: 1000px;
	left: 0;
	width: 100%;
	height: 50px;
	background: chartreuse;
	}

	#scrolled.active {
	background: magenta;
	}


	</style>
	</head>

	<body>
	<div id="root-bounds"></div>
	<p>Scroll down...</p>
	<div id="scrolled"></div>
	<script>
	const rootMargin = "200px 0px"; // This appears to do fuck-all
	const negativeRootMargin = "-200px 0px"; // Meanwhile, negative works?

	const rootBoundsOverlay = document.getElementById('root-bounds');
	rootBoundsOverlay.style.margin = rootMargin;

	const scrolled = document.getElementById('scrolled');

	const i = new IntersectionObserver((intersected, io) => {
	console.dir(intersected);
	const [item] = intersected;
	if (item.isIntersecting) {
	scrolled.classList.add('active');
	} else {
	scrolled.classList.remove('active');
	}
	}, {
	threshold: 0,
	rootMargin: negativeRootMargin,
	});

	i.observe(scrolled);
	</script>
	</body>