根据页面位置更改类

Question

我在网站上使用基础，主页上有两列内容（一个用于主要内容，另一个用于侧边栏）。一个是七列，另一个是五列宽，但主列更长，内容更多。我想知道是否可以隐藏其中一个元素并根据页面位置或滚动放大另一个元素。

采取类似的方式：

<div id="main" class="seven columns></div>
<div id="sidebar" class="five columns></div>

当用户向下滚动到侧栏结束但主要继续的地方时：

<div id="main" class="twelve columns></div>
<div id="sidebar" class="hide-for-all"></div>

因此侧边栏会被隐藏，主要会重新调整大小以填充剩余的空间，但是当用户向上滚动时，它会重新出现并返回原来的状态。 我认为这可以通过jquery，但我不知道该怎么做。我假设它必须根据页面位置改变div类。

Answer 1

您可以通过以下方式获取页面顶部的距离：

$(window).scroll(function() {
   scrolled = $(window).scrollTop(); //px distance from top of page 
   //logic goes here
});