Change target of a link based on what is currently

问题:

Again, I'm quite new to jQuery and there are still many things that seem simple yet get me stuck for hours.

Right now, I'm trying to replace the target of a link. That I know how to do. But the thing is, the target has to change based on the div currently displayed.

Here's the wireframe :

The link, of course, is on the arrow, which is fixed at the bottom of the viewport. You might have guessed by now, I'd like the link to point to #div2 when the visitor is on #div1, to #div3 when they are on #div2 and so on...

I thought of a couple of ways to do this:

1) Instead of a link to a div, the arrow could just trigger a scroll of X pixels. As all the divs must have the same height, that would work. Only, the user could at all times scroll themselves with their mouse instead of clicking the arrow. And if they do so, clicking the arrow afterwards would probably bring them in the middle of nowhere.

2) I could replace the target of the link depending on which div is being hovered. But that would raise two other problems: the link wouldn't be replaced at all on mobile devices, and it just wouldn't be replaced either when the cursor is hovering the arrow itself, as it is fixed and above everything else.

So, the ideal solution would actually replace the target of the link depending on the percentage of the divs being displayed: the link would have a target of #div3 if more than 50% of #div2 is being displayed.

I think that would be the perfect solution. But I have absolutely no clue as to how to do this. ^^

I would greatly appreciate any help. :-)

Thanks in advance!

edit: Actually, now that I think of it, the solution shouldn't replace the target of a link if more than 50% of a certain div is being shown. The divs have a height of 1100px, so if anyone with a screen definition lower than that (which is most people) goes on the site, it would cause problems. So the script should in fact replace the target of the link with #div3 if the visible height of #div2 is greater than that of #div3. I don't know if it makes the solution any easier to come up with. :-/

回答1:

This is how I would solve your problem:

I guessing you're using Position:relative, in that case you can simply pull the offset of the viewport content, and divide by the the height of each DIV (since they are all the same) to give you the number of DIVs. Use this number to determine what child is in view (or most in view), reverence a data-attribute for that child that contains it's link.

Let me know if you need me to illustrate with code.

hope this helps. Good Luck.

回答2:

I think this is what you are looking for: Your html should be:

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

So just with that extra class. Then download this small library http://www.appelsiini.net/projects/viewport and use it like this:

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

As the document is scrolled, which ever div is on view, its id is added to your arrow anchor.

Hope this is what you wanted