jQuery sticky menu / sidebar

To make a sticky sidebar or stick menu (as feature on the left hand side of this page:

// Sticky nav bar.
fixed = false;
navBar = $(".region-sidebar-first");
threshold = navBar.offset().top;
$(window).scroll(function() {
    belowThreshold = $(window).scrollTop() >= threshold;
    // Note that we only make the navbar sticky if the window height is
    // greater than the height of the navbar. Otherwise, you could never
    // see the entire navbar.
    if (!fixed && belowThreshold && navBar.outerHeight() < $(window).height()) {
        navBar.addClass("fixed");
        fixed = true;
    }
    else if (fixed && !belowThreshold) {
        navBar.removeClass("fixed");
        fixed = false;
    }
});

Accompanying CSS:

.region-sidebar-first.fixed {
  position: fixed;
  top: 0;
  width: 210px;
}

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.