Change the target of the link based on the currently displayed

Question

Again, I'm brand new to jQuery, and there are many more things that seem simple, but make me loop for hours.

Now I'm trying to replace the target of the link. I know how to do it. But the fact is that the goal should change depending on the div currently being displayed.

Here's the wireframe:

The link, of course, is located on the arrow, which is fixed at the bottom of the viewport. You may have already guessed, I want the link to point to # div2 when the visitor is on # div1, to # div3 when they are on # div2, etc ...

I thought of several ways to do this:

1) Instead of referencing a div, an arrow can simply call up a scroll of X pixels. Since all divs should be the same height, this will work. Only the user could scroll himself with his mouse at any time, and not click on the arrow. And if they do, pressing the arrow afterwards is likely to lead them to the middle of nowhere.

2) I could replace the target of the link, depending on which div is hanging. But this will cause two more problems: the link will not be replaced at all on mobile devices, and it simply won’t be replaced when the cursor itself does not vibrate, since it is fixed and above everything else.

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

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

I would really appreciate any help. :-)

Thanks in advance!

edit: Actually, now that I am thinking about this, the solution should not replace the target of the link if more than 50% of the specific div is displayed. The sections are 1100 pixels high, so if someone with a screen definition lower than this (most people) goes to the site, this will cause problems. Thus, the script should actually replace the target of the link with # div3 if the visible height of # div2 is greater than the height of # div3. I don't know if this decision will make the decision easier .: - /

Answer 1

Here is how I would solve your problem:

I assume that you are using Position: relative, in which case you can simply pull the offset of the contents of the viewport and divide by the height of each DIV (since they are all the same) to give you the number of DIVs. Use this number to determine which child is in sight (or, to the greatest extent), read the data attribute for this child element that contains the link.

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

hope this helps. Good luck.

Answer 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 this 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); }) 

When scrolling through a document that is ever displayed in a div, its identifier is added to your arrow anchor.

Hope this is what you wanted