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