Sticky Sidebar effect with Javascript (without using plugin)

Question

How can I do something as Udemy page courses do with sidebar? When user scrolling down the page, the sidebar it's fixed on the page top and when reaches a certain place (before touching the footer) that sidebar stops being sticky.

I've already can get do the sticky sidebar to the top when on scrolling down, but I don't know how to stop being sticky when scroll arrives in the footer.

My Javascript:

var sidebar = $('.cpn_course-sidebar'),
      sidebarDistance = sidebar.offset().top,
      sidebarWidth = sidebar.width(),
      $window = $(window);

  $window.scroll(function() {

    if ( $window.scrollTop() >= sidebarDistance ) {
      $(sidebar).addClass('slideDown');
      $(sidebar).css({'width': sidebarWidth, 'left': 'auto', 'top': '10px'});
    } else {
      $(sidebar).removeClass('slideDown');
    }
  });

Udemy example - https://www.udemy.com/the-complete-javascript-course/

My example - https://jsfiddle.net/felipeemarcon/aq9Laaew/225674/

Can someone help me? Thank you.

Answer 1

I hope that this is what u want, if not pls tell me.

<section class="section-1">
<div class="container">
  <div class="row">
    <div class="col-sm-8">
    <h1>Header</h1>
  </div>
  <div class="col-sm-4">
    <div class="sidebar" id="sidebar">
      <h1>Sidebar</h1>
  </div>
  </div>
  </div>
</div>

</section>

<section class="section-2">
  <div class="container">
    <div class="row">
      <div class="col-sm-8">
        <h1>Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed scelerisque libero. Curabitur laoreet vitae ante ac porttitor. Sed venenatis pellentesque lacus. Nam sed augue diam. Proin vehicula diam non nulla pulvinar lobortis lacinia eu leo. Maecenas vestibulum lacinia augue, eget egestas turpis efficitur eget. Maecenas ut hendrerit dolor, et rutrum risus. Quisque dictum purus non nisi fringilla, in aliquet metus blandit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed scelerisque libero. Curabitur laoreet vitae ante ac porttitor. Sed venenatis pellentesque lacus. Nam sed augue diam. Proin vehicula diam non nulla pulvinar lobortis lacinia eu leo. Maecenas vestibulum lacinia augue, eget egestas turpis efficitur eget. Maecenas ut hendrerit dolor, et rutrum risus. Quisque dictum purus non nisi fringilla, in aliquet metus blandit.</p>
      </div>
    </div>
  </div>
</section>

<section class="section-3" id="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1>Footer</h1>
      </div>
    </div>
  </div>
</section>
<p id="test">
</p>

.section-1, .section-3 {
  width: 100%;
  background: royalblue;
  height: 250px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar {
  position: absolute;
  top: 0;
  width: 100%;
  right: 0;
  background: #ec5252;
  display: flex;
  justify-content: center;
  height: 300px;
  z-index: 2;
}

.sidebar.slideDown {
  position: fixed;
}


#test{
  position:fixed;
  top:10px;
}

var sidebar = $('#sidebar'),
        sidebarDistanceTop = sidebar.offset().top,
    sidebarWidth = sidebar.width(),
    $window = $(window),
    $document = $(document),
    footer = $('#footer');

$window.scroll(function() {
    let footerHeight = footer.height();
  let sidebarHeight = sidebar.height();
  let scrollTarget = $document.height() - footerHeight - sidebarHeight;
  let sidebarNewPosition = $document.height() - footerHeight - sidebarHeight -sidebarDistanceTop;
  document.getElementById('test').innerHTML = scrollTarget;
    if (($window.scrollTop() >= sidebarDistanceTop)&&
        ($window.scrollTop() < scrollTarget)) {
    $(sidebar).addClass('slideDown');
    $(sidebar).css({'width': sidebarWidth, 'left': 'auto', 'top': '10px'});
  } else if($window.scrollTop() < sidebarDistanceTop) {
    $(sidebar).removeClass('slideDown');
    $(sidebar).removeClass('footerreached');
  } else if($window.scrollTop() > scrollTarget){
    $(sidebar).removeClass('slideDown');
    $(sidebar).css({'width': sidebarWidth, 'left': 'auto', 'top': sidebarNewPosition + 'px'});
  }
});

the jsfiddle: https://jsfiddle.net/ftyxcLr5/36/

best regards :)