如何在容器的末尾固定侧边栏

Question

我有一个有两列的容器，其中一列有一个侧栏。

JSFiddle

侧边栏是固定的，当它靠近底部时，我使用jQuery来改变bottom，让它大致停留在容器的底部。

如何才能使它在撞到容器底部（红色边框）时完全停止移动？它必须适用于任何高度的侧边栏。

HTML

<div class="container">
  <div class="col-left">
    <div class="sidebar">
      fixed sidebar
    </div>
  </div>

  <div class="col-right">
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
  </div>
</div>

<footer>Footer</footer>

CSS

.container {
  outline: 1px solid red;
  position: relative;
}

.col-left {
  width: 58%;
  display: inline-block;
  outline: 1px solid black;
  vertical-align: top;
  height: 100%;
}

.col-right {
  width: 40%;
  display: inline-block;
  outline: 1px solid black;
  vertical-align: top;
}

.sidebar {
  position: fixed;
  top: 50px;
  left: 50px;
  height: 200px;
  width: 100px;
  background: #fff;
}

footer {
  background: #000;
  width: 100%;
  height: 300px;
  margin-top: 100px;
  color: #fff;
}

jQuery （怀疑它是否有用我认为需要重新考虑）

jQuery(window).scroll(function(){
  var scrollBottom = jQuery(document).height() - jQuery(this).scrollTop() - jQuery(this).height();
  console.log(scrollBottom);

     if (scrollBottom < 300){
         jQuery('.sidebar').css('bottom', Math.abs(scrollBottom - 420));
       jQuery('.sidebar').css('top', 'auto');
     } else {
       jQuery('.sidebar').css('bottom', 'auto');
       jQuery('.sidebar').css('top', '50px');
     }

Answer 1

这是一个jQuery解决方案，通过计算相关元素的高度，并计算页面的当前滚动位置来实现。当侧边栏通常移动到其容器之外时，会向其中添加一个.lock类，使用CSS对其进行解除修复。

下面的工作示例：

＆＃13;

＆＃13;

var $sidebar = $('.sidebar');
var $container = $('.container');
var sideBottom = $sidebar.offset().top + $sidebar.height();
var contBottom = $container.offset().top + $container.height();

$(window).scroll(function() {
  if (window.scrollY + sideBottom > contBottom) {
    $sidebar.addClass('lock');
  } else if ($sidebar.hasClass('lock')) {
    $sidebar.removeClass('lock');
  }
});

＆＃13;

body {
  background: #eee;
  margin: 0;
}

.container {
  outline: 1px solid red;
  position: relative;
}

.col-left {
  width: 58%;
  display: inline-block;
  outline: 1px solid black;
  vertical-align: top;
  height: 100%;
}

.col-right {
  width: 40%;
  display: inline-block;
  outline: 1px solid black;
  vertical-align: top;
}

.sidebar {
  position: fixed;
  top: 50px;
  left: 50px;
  height: 140px;
  width: 100px;
  background: #fff;
}

.sidebar.lock {
  position: absolute;
  bottom: 0;
  top: auto;
}

footer {
  background: #000;
  width: 100%;
  height: 400px;
  margin-top: 100px;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="col-left">
    <div class="sidebar">
      fixed sidebar
    </div>
  </div>

  <div class="col-right">
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
  </div>
</div>

<footer>Footer</footer>

＆＃13;

＆＃13;

＆＃13;