var pageLink = $(".sidebar"); // Select the section var initialTop = pageLink.offset().top; // Store the initial position var stickyPosition = initialTop - 120; // Activate sticky when reaching 120px $(window).scroll(function () { var scrollTop = $(window).scrollTop(); // Current scroll position if (scrollTop >= stickyPosition) { pageLink.addClass("sticky").css("transition", "300ms"); pageLink.parents("div").css("overflow", "visible"); // Apply to all parent divs } // Remove sticky class when scrolled back to original position else if (scrollTop < initialTop) { pageLink.removeClass("sticky").css("transition", "300ms"); } });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter