html - Div - 专注于滚动屏幕

Question

我有以下代码：

<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 并且它们的内容开始分别显示在右窗格上。

我怎么可能做到这一点？

谢谢。

Answer 1

有可用于此功能的插件。

与 Twitter Bootstrap 捆绑在一起的Scrollspy插件就是一个很好的例子。

也可用于jQuery和MooTools。

Answer 2

在 jsfiddle http://jsfiddle.net/mekwall/up4nu/上查看这个

HTML

<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>

Answer 3

在纯 javascript 中，您可以简单地将处理程序附加到用于鼠标移动的分区和用于滚动事件的窗口：

if (!window.addEventListener) { // for compatibility with IE6-8
    window.addEventListener = function (type, listener, useCapture) {
        attachEvent('on' + type, function () {
            listener(event)
        });
    }
}

var display, divs, divslen;

window.addEventListener('load', function () {
    display = document.getElementById('display_div');
    divs = document.getElementById('leftpane').getElementsByTagName('div');
    divslen = divs.length; // collection length
    for (var i = 0; i < divslen; i++) {
        divs[i].onmouseover = function () {
            display.innerHTML = this.innerHTML;
        };
    }
}, false);
window.addEventListener('scroll', update_display_div, false);
window.addEventListener('resize', update_display_div, false);

function update_display_div() {
    var updated = false;
    for (var i = 0; i < divslen; i++) {
        var rect = divs[i].getBoundingClientRect();
        if (!updated && rect.top > -20) {
            display.innerHTML = divs[i].innerHTML; //show topmost div
            updated = true;
        }
    }
}

jsfiddle

感谢 Michal Klouda 参考 getBoundingClientRect() 函数。

Answer 4

您不一定需要您所描述的插件。你可以用几行 javascript 代替：

$(window).on('load resize scroll', function() {
    var delta = 50;
    $('#leftpane div').each(function(i) {
        var rect = this.getBoundingClientRect();
        if(rect.top >= 0  && rect.top < window.innerHeight - delta)
        {
            $('#display_div').html($(this).html());
            return;
        }
    });
});

在这里和这里工作小提琴。