Keep your sidebar navigation by your side as you venture through the content of pages. This sticky nav will be by your side. <3
ie - http://cloud.madebyspeak.com/74060d | https://www.lifesongstudio.com/policies
if ($(window).width() >= 768) {
// this is for desktop
var stickySidebar = $('.sticky-nav');
if (stickySidebar.length > 0) {
var stickyHeight = stickySidebar.height() + 0,
sidebarTop = stickySidebar.offset().top;
}
// on scroll move the sidebar
$(window).scroll(function () {
if (stickySidebar.length > 0) {
var scrollTop = $(window).scrollTop() + 200;
if (sidebarTop < scrollTop) {
stickySidebar.css('top', scrollTop - sidebarTop + 0);
// stop the sticky sidebar at the footer to avoid overlapping
var sidebarBottom = stickySidebar.offset().top + stickyHeight,
stickyStop = $('.text-container').offset().top + $('.text-container').height();
if (stickyStop < sidebarBottom) {
var stopPosition = $('.text-container').height() - stickyHeight;
stickySidebar.css('top', stopPosition);
}
} else {
stickySidebar.css('top', '0');
}
}
});
$(window).resize(function () {
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
}
});
}
<section class="default-main">
<div class="container-fluid main-content">
<!-- Must Use PageBody -->
<div class="row">
<div class="col-md-7 col-sm-10 col-md-offset-1 col-sm-offset-1 text-container">
<asp:ContentPlaceHolder ID="cphPageBody" runat="server" visible="true"></asp:ContentPlaceHolder>
</div>
<div class="col-md-3 col-sm-0 col-md-offset-1 sticky-nav">
<div class="sibling-nav">
<asp:ContentPlaceHolder ID="cphSideMenu" runat="server" visible="true"></asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</section>