• Skip to main content
  • Skip to site footer
Sir Lion Labs

Sir Lion Labs

Creative Media Design

Smooth Sticky Scroll-to Navigation

by sirlion on October 10, 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>
→ Web Tutorial→ Web Tutorial

About sirlion

Next Post:Excited for SEMA show 2014