Tiggles ツ
3/19/2019 - 2:00 PM

Sticky Sidebar

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>