SOURCE

<style>
	body {
		height: 500px;
	}

	.header {
		height: 150px;
        background-color: lightblue;
	}

	.fixed {
		position: fixed;
		top: 100px;
	}
</style>

<div class="header"></div>
<div class="box">
	<div class="inner">
		<button>test</button>
    </div>
</div>

<script>
    var box = document.querySelector('.box')
    var inner = document.querySelector('.inner')
    document.addEventListener('scroll', () => {
        const rect = box.getBoundingClientRect()
        console.log(rect.top)
        if(rect.top < 100) {
            inner.classList.add('fixed')
        } else {
            inner.classList.remove('fixed')
        }
    })
</script>