根据当前显示的内容更改链接的目标

Question

同样，我对jQuery很陌生，但仍有许多事情看起来很简单但却让我陷入困境几个小时。

现在，我正在尝试替换链接的目标。我知道怎么做。但问题是，目标必须根据当前显示的div进行更改。

这是线框：

当然，链接位于箭头上，箭头固定在视口的底部。您可能已经猜到了，我希望当访问者访问＃div1时指向＃div2的链接，当＃div2处于＃div2时指向＃div3，依此类推......

我想到了几种方法：

1）箭头只能触发X像素的滚动，而不是指向div的链接。由于所有div都必须具有相同的高度，因此可行。只有用户可以随时用鼠标滚动自己而不是单击箭头。如果他们这样做，之后点击箭头可能会将他们带到不知名的地方。

2）我可以根据正在悬停的div替换链接的目标。但这会引发另外两个问题：在移动设备上根本不会替换链接，并且当光标悬停在箭头本身时它也不会被替换，因为它是固定的并且高于其他所有内容。

因此，理想的解决方案实际上会根据显示的div的百分比来替换链接的目标：如果正在显示超过50％的#div2，则链接将具有＃div3的目标。

我认为这将是完美的解决方案。 但我完全不知道如何做到这一点。 ^^

我非常感谢任何帮助。 ： - ）

提前致谢！

编辑：实际上，现在我想到了，如果显示超过50％的特定div，解决方案不应该替换链接的目标。 div的高度为1100px，因此如果屏幕定义低于此值（大多数人）的任何人进入网站，则会导致问题。 因此，如果#div2的可见高度大于#div3的可见高度，则脚本实际上应该用#div3替换链接的目标。我不知道它是否使解决方案变得更容易。 ： - /

Answer 1

这就是我解决问题的方法：

我猜你正在使用Position：relative，在这种情况下你可以简单地拉出视口内容的偏移量，然后除以每个DIV的高度（因为它们都是相同的）以给你数量资料核实。使用此数字来确定视图中（或大多数视图中）的子项，尊重包含其链接的子项的数据属性。

如果您需要我用代码说明，请告诉我。

希望这会有所帮助。祝你好运。

Answer 2

我认为这就是你要找的东西： 你的HTML应该是：

<div class="wrap" id="div1"></div>
<div class="wrap" id="div2"></div>
<div class="wrap" id="div3"></div>
<div class="wrap" id="div4"></div>

所以只需要额外的课程。然后下载这个小型库http://www.appelsiini.net/projects/viewport并像这样使用它：

$(document).scroll(function(){
var a = "#" + $(".wrap:in-viewport").attr('id');
$('a#arrow').attr('href', a);
})

当文档滚动时，哪个div在视图中，其id将添加到箭头锚点。

希望这是你想要的