0

再说一次，我对 jQuery 还是很陌生，还有很多看起来很简单的事情却让我困了好几个小时。

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

这是线框：

在此处输入图像描述

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

我想到了几种方法来做到这一点：

1）箭头可以触发 X 像素的滚动，而不是指向 div 的链接。由于所有的 div 必须具有相同的高度，这将起作用。只是，用户可以随时用鼠标滚动自己，而不是单击箭头。如果他们这样做，之后单击箭头可能会使他们陷入困境。

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

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

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

我将不胜感激任何帮助。:-)

提前致谢！

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

4

2 回答 2

0

这就是我将如何解决您的问题：

我猜你正在使用 Position:relative，在这种情况下，你可以简单地拉动视口内容的偏移量，然后除以每个 DIV 的高度（因为它们都是相同的），就可以得到 DIV 的数量。使用这个数字来确定哪个孩子在视图中（或大多数在视图中），尊重包含它的链接的那个孩子的数据属性。

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

希望这可以帮助。祝你好运。

于 2013-01-02T17:22:58.897 回答
0

我认为这就是您要寻找的内容：您的 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 被添加到您的箭头锚点中。

希望这是你想要的

于 2013-01-02T19:13:13.853 回答