在页脚处停止的固定位置侧边栏

Question

这个问题我已经看过几次了，但还没有找到一个好的答案，所以我想我会再问一次。

我有一个固定位置在文档顶部的侧边栏，这会使元素脱离正常的 html 流。

当我们滚动到我的页脚所在的底部时，我希望边栏与页脚一起向上推。

HTML

<div id="content">
  <div id="sidebar">
    <ul>
      <li>link</li>
      <li>link</li>
      <li>link</li>
    </ul>
  </div>
</div>
<div id="footer">
  <p>content of unspecified height</p>
  <p>content of unspecified height</p>
  <p>content of unspecified height</p>
  <p>content of unspecified height</p>
</div>

CSS

#content {
  width: 800px;
  margin: 0 auto;
  position: relative;
}

#sidebar {
  padding: 10px;
  position: fixed;
  top: 0;
}

#footer {
  padding: 10px;
}

JS

...?

我想需要发生的是当“内容” div 的底部滚动到屏幕上时，JS 会将侧边栏位置切换为绝对或相对于该 div 的底部，所以它可以回到正常流程..但我愿意接受最佳方法的建议。

编辑：哦，是的，当页面向上滚动时，侧边栏需要回到固定的顶部位置——以防它不明显:)

对 JS 和 JQuery 还是很陌生，这也是一些现有答案对我来说不太合适的另一个原因。

感谢您的任何意见！如果我需要澄清或更正任何事情，请告诉我。

Answer 1

您可能需要一个$(window).on('scroll') 函数来比较页脚的顶部和窗口的底部。伪代码：

//Make the height of side nav shrink as we scroll past the footer
var intPos = TopOfFooter - BottomOfWindow
If (intPos < 0) {
   var newHeight = $(window).height() + intPos // intPos is negative so will take away
   $('#sidebar').height(newHeight);
} else {
   $('#sidebar').height('100%');
}

或者类似的东西......

编辑

仅供参考：

var TopOfFooter = $('#footer').offset().top;
var BottomOfWindow = $(window).scrollTop() + $(window).height();