Alexprom,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
p{
height: 500px;
}
#oct-slide-panel{
position: fixed;
display: none;
}
#oct-slide-panel.show{
display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let panel = document.querySelector('#oct-slide-panel');
const lazyShow = btns => {
btns.forEach(({intersectionRatio}) => {
panel.classList.toggle('show', intersectionRatio > .3);
});
};
let observer = new IntersectionObserver(lazyShow, {
rootMargin: "10px",
threshold: [.3]
});
document.querySelectorAll('.btn').forEach(elem => observer.observe(elem));
});
</script>
</head>
<body>
<div id="oct-slide-panel">вижу кнопу</div>
<p></p>
<button class="btn">кнопа</button>
<p></p>
</body>
</html>