Question

我如何做Udemy页面课程对侧边栏所做的事情？当用户向下滚动页面时，侧边栏固定在页面顶部，并且到达某个位置（触摸页脚之前）时，侧边栏不再发粘。

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

我的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/

最诚挚的问候：）

带有Javascript的粘性补充工具栏效果（不使用插件）

1 个答案: