<!DOCTYPE html>
<html>
<head>
<style>
#employee,
#employee-dance,
#down-text {
height: 700px;
}
#employee {
background: green;
}
#employee-dance {
background: red;
}
#down-text {
background: orange;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<button type="button">Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="employee"></section>
<section id="employee-dance">
<audio loop id="myAudio">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
</audio>
</section>
<section id="down-text"></section>
<script type="text/javascript">
// Scrool div anchor
var danceEl = $("#employee-dance");
var danceElOffset = danceEl.offset().top;
var danceElHeight = danceEl.height();
var myAudio = document.getElementById("myAudio");
var $w = $(window).scroll(function() {
if ($w.scrollTop() >= danceElOffset && $w.scrollTop() <= (danceElOffset + danceElHeight)) {
myAudio.play();
myAudio.volume = 0.2;
} else {
myAudio.pause();
myAudio.volume = 0;
}
});
</script>
</body>
</html>