I'm looking to create a 'Page section' that remains in place while scrolling for a specific distance and then smoothly transitions to the next section. I've attempted to implement this within the child theme without success... Any suggestions on how to achieve this effect without relying heavily on Javascript?
CSS
.isSticky {
top: 0;
position: fixed;
}
HTML
<div>
<section id="top"></section>
<section id="test2"></section>
<section id="bottom"></section>
</div>
JS
$(document).ready(function () {
var el = $('#test2');
var elTop = el.position().top;
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop >= elTop) {
el.addClass('isSticky');
} else {
el.removeClass('isSticky');
}