javascript - 使用 Javascript 的粘性侧边栏效果(不使用插件)

Question

我怎样才能像 Udemy 页面类(class)那样用侧边栏做一些事情？当用户向下滚动页面时，侧边栏固定在页面顶部，当到达某个位置(在触摸页脚之前)时，侧边栏不再粘滞。

我已经可以在向下滚动时将粘性侧边栏移至顶部，但我不知道如何在滚动到达页脚时停止粘性。

我的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 示例 - https://www.udemy.com/the-complete-javascript-course/

我的例子 - https://jsfiddle.net/felipeemarcon/aq9Laaew/225674/

有人可以帮助我吗？谢谢。

Answer 1

我希望这是你想要的，如果不是请告诉我。

<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'});
  }
});

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

最好的问候:)