Upon searching for scroll-to navigation, the top results yielded scripts which were unsmooth; the text jumped around and became hidden once the div became sticky. We finally found this script here on jsfiddle.com but it was unclear on applying it to specific divisions with a specific class. Check out the code below we altered to work with a class called “sticky”. Apply it to your own website for smooth scroll-to sticky divs!
<script>
jQuery(document).ready(function($) {
clone = $('div.sticky').clone();
$('div.sticky').after(clone);
$('div.sticky:last').hide();
offset = $('div.sticky:first').offset();
var fromtop = offset.top;
$(document).scroll(function() {
doc = $(this);
dist = $(this).scrollTop();
if (dist >= fromtop) {
$('div.sticky:last').show();
$('div.sticky:first').css({
'position': 'fixed',
'top': '0',
'left': '0',
'right': '0',
'z-index': '200'
});
} else {
$('div.sticky:first').css({
'position': 'static'
});
$('div.sticky:last').hide();
}
});
});
</script>
