HTML

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;
        }
    });
});

工作小提琴here和here。

Div - 专注于滚动屏幕

4 个答案:

HTML