Html Div-聚焦于滚动屏幕

我有以下代码：

<div id="leftpane">
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
</div>
<div style="float:right" id="display_div"></div>

一个
两个
三

我有一个两列布局的页面，一个左窗格和一个右窗格（=主内容区）。左窗格具有类似菜单项的div（一、二、三等）。所选div的相应内容显示在右侧窗格中

我想做什么（onload）：第一个div必须在左窗格中突出显示，相应的内容显示在右窗格中。当我继续向下滚动div的左窗格时，焦点应该逐渐转移到较低的div，它们的内容开始分别显示在右窗格上

我怎样才能做到这一点

---

谢谢。

有可用于此功能的插件

与Twitter引导捆绑在一起的插件就是一个很好的例子

---

也可用于和。

在JSFIDLE上查看这一个

HTML

福
酒吧
巴兹

在纯javascript中，您只需将处理程序附加到鼠标移动的分区和滚动事件的窗口：

if（！window.addEventListener）{//与IE6-8的兼容性
window.addEventListener=函数（类型、侦听器、useCapture）{
attachEvent（'on'+类型，函数（）{
侦听器（事件）
});
}
}
变量显示、divs、divslen；
window.addEventListener（'load'，函数（）{
display=document.getElementById（'display_div'）；
divs=document.getElementById（'leftpane'）.getElementsByTagName（'div'）；
divslen=divs.length；//集合长度
对于（var i=0；i-20）{
display.innerHTML=divs[i].innerHTML；//显示最上面的div
更新=真；
}
}
}

---

感谢Michal Klouda对getBoundingClientRect（）函数的引用。

您不必为所描述的内容使用插件。您可以使用几行javascript：

$（窗口）.on（'load resize scroll'，function（）{
varδ=50；
$（'#leftpane div'）。每个（函数（i）{
var rect=this.getBoundingClientRect（）；
如果（rect.top>=0&&rect.top

---

工作小提琴和。

使用jsfiddle解释您的问题。可能重复：@DavidJashi:上面的问题指的是向下滚动并跟随滚动的最大限制，mine是指在默认情况下聚焦第一个div并显示其内容，然后在页面向左滚动时显示其他div内容，并向下滚动其他div。

<ul id="top-menu">
  <li class="active">
    <a href="#">Top</a>
  </li>
  <li>
    <a href="#foo">Foo</a>
  </li>
  <li>
    <a href="#bar">Bar</a>
  </li>
  <li>
    <a href="#baz">Baz</a>
  </li>
</ul>

<a id="foo">Foo</a>
<a id="bar">Bar</a>
<a id="baz">Baz</a>