2

http://jsfiddle.net/5Cfm6/1/

因此，每当我点击观看时，它会转到带有视频的 div，但如果我点击导航栏上的任何其他链接，它有时会突出显示活动链接，而且它总是错误的链接。例如，如果我单击关于，它将突出显示链接。有人可以帮我让它突出显示我目前所在的正确 div 吗？

这就是我到目前为止所拥有的。

$(window).scroll(function () {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('.container div').each(function (i) {
            if ($(this).position().top <= windscroll - 20) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });
    } else {
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }`enter code here`

}).scroll();
4

2 回答 2

2

我想指出（至少在您的小提琴中）“赞助商div”不在.div.container您将来可能会遇到其他意想不到的问题。

因此，要使代码（并非偶然）正常工作，您必须做的是：

  1. 将“赞助商”div放在div.container.
  2. 改变：
    $('.container div').each(function (i) {到
    $('.container > div').each(function (i) {
  3. 将：更改
    if ($(this).position().top <= windscroll + 20) {为
    if ($(this).position().top <= windscroll + 34) {，
    因为这是您在第 4 行 ( ) scrollTop中设置的偏移量。scrollPoint = $('...').offset().top - 34

工作演示可以在这里找到。

编辑：您可能要解决的最后一种情况是当最后一部分的高度小于当前窗口高度时，因此不可能scrollTop到达最后一部分的position().top. 在这种情况下，当用户一直滚动到底部时，突出显示导航栏中的最后一个元素仍然有意义。这可以通过这个小添加来实现：

$(window).scroll(function () {
    ...
    var fromBottom = $(document).height() 
                     - ($(window).scrollTop() + $(window).height());
    if (fromBottom == 0) {     // <-- scrolled to the bottom
        $('nav a.active').removeClass('active');
        $('nav a:last').addClass('active');
    } else if ...

（工作演示也已更新以说明这一点。）

（注意：与当前问题无关，但您可能希望将</br>代码中的 s替换为<br/>:)）

于 2013-05-13T07:13:01.307 回答
0

尝试定位.containerdiv 的直接子代而不是每个后代，因为它是从 0 开始的，所以您需要将值增加i1：

$('.container > div').each(function (i) {
    var index = i + 1;
    if ($(this).position().top <= windscroll - 20) {
        $('nav a.active').removeClass('active');
        $('nav a').eq(index).addClass('active');
    }
});

更新小提琴

于 2013-05-13T06:29:15.767 回答