代码之家 › 专栏 › 技术社区 › Felipe Marcon

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

sticky sidebar javascript

Felipe Marcon · 技术社区 · 6 年前

我怎样才能像我的页面课程那样使用侧边栏呢?当用户向下滚动页面时,侧边栏固定在页面顶部,当到达某个位置(在触到页脚之前)时,侧边栏就不再粘滞。

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

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

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

1 回复 | 直到 6 年前

Mahran Sarko 6 年前

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

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

JS中间: https://jsfiddle.net/ftyxcLr5/36/

致以最诚挚的问候:)