<script>
import IntersectionObserver from "svelte-intersection-observer";
let element;
let intersecting;
</script>
<header class:intersecting>
{intersecting ? 'Element is in view' : 'Element is not in view'}
</header>
<IntersectionObserver {element} bind:intersecting threshold={0.5}>
<div bind:this={element}>Hello world</div>
</IntersectionObserver>
<style>
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem;
background-color: #e0f7f6;
}
div {
margin-top: calc(100vh + 1px);
height: 38vh;
padding: 1rem;
background-color: #376462;
color: #fff;
}
header:before {
content: "Scroll down.";
display: block;