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

...?

我认为需要发生的事情就是＆＃34;内容＆＃34; 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();

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

1 个答案: