Question

在开发单页面布局时，我尝试创建并使用第三方脚本在页面滚动时突出显示当前菜单项，基本上使用jQuery偏移和scrollTop属性。无论涉及哪种技术，大多数解决方案都依赖于这种伪算法所代表的基本逻辑：

FOR EACH page section DO{
   IF (scroll top >= page section top) THEN{
      HIGHLIGHT THE RESPECTIVE MENU ITEM
      BREAK
   }
}

当您有大的页面部分，大于窗口高度时，这可以正常工作。但是，如果您有较小的部分，则可能会出现窗口上显示两个（或更多）部分的情况。这是当这个逻辑开始失败时，因为希望一次只突出显示一个菜单项，而不是两个。例如：

您可以单击一个菜单项，页面滚动到该菜单项，但之后还会显示上一个/下一个部分，导致您的脚本突出显示一个意外的菜单项。
您可以在页面的某个位置滚动，希望某些菜单项突出显示，但选择上一个/下一个，因为它们各自的部分也会显示。

我想知道是否还有其他伪算法，考虑窗口高度，剖面高度，滚动方向，以及一些考虑到窗口上显示两个或更多部分，选择适当的菜单项进行其他几何评估。

以下是一些测试创意的基本代码：http://jsfiddle.net/odon/59dpS/

Answer 1

这应该做：

next-section-top = page-section-top + page-section-height;

IF (scroll-top >= page-section-top && scroll-top < next-section-top) {
      HIGHLIGHT page-section MENU ITEM
}

修改
你是对的 - 上面不会覆盖底部的小部分......但是这部分将涵盖所有可能的情况：

var scrollPosition = scrollTop + (scrollTop/maxScroll*windowHeight); IF (scrollPosition >= page-section-top && scrollPosition < next-section-top) {....}

在你的代码中 - 它将是这样的：http://jsfiddle.net/TFJ8P/5/

关于javascript的几何问题，以在页面滚动时突出显示菜单项

1 个答案: