Smooth Sticky Scroll-to Navigation

October 10th, 2014

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>

Want to work with us?

No project too big or small. Send us a message and let us know a little about what you're looking for.