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

同样，我对jQuery相当陌生，还有很多事情看起来很简单，但让我陷入了数小时的困境。根据当前显示的内容更改链接的目标

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

这里的线框：

enter image description here

链路，当然，是上的箭头，其固定在视口的底部。你现在可能已经猜到了，我希望链接指向＃div2，当访问者在＃div1时，＃div3当他们在＃div2，等等......

我想到了一对夫妇的方法来做到这一点：

1）而不是链接到一个div，箭头可能会触发一个X像素滚动。由于所有的div都必须具有相同的高度，这将起作用。只有用户可以随时用鼠标滚动而不是点击箭头。如果他们这样做，之后点击箭头可能会使他们陷入无处不在的境地。

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

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

我认为这将是一个完美的解决方案。但我绝对没有线索如何做到这一点。 ^^

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

在此先感谢！

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

来源

2013-01-02 Tom S.

这是我会怎么解决你的问题：

我你正在使用的位置猜测：相对的，在这种情况下，你可以简单地将视内容的偏移量，再除以身高每个DIV的数量（因为它们都是相同的）给你DIV的数量。使用这个数字来确定哪个孩子在视图中（或者在视图中），尊重包含它的链接的那个孩子的数据属性。

让我知道你是否需要我用代码来说明。

希望这有助于。祝你好运。

来源

2013-01-02 17:22:58

我认为这是你在找什么：你的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-02 19:13:13 aurel

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

回答

相关问题