I have a nav element that fade's in when it hits a specified anchor and fade's out when it returns to its original place: This is all done by the waypoint jquery controlled by the offset:
(please view http://jamesanthonyallan.com/ and navigate to 'Work' and then click on the pink rabbit head image
pink rabbit head http://jamesanthonyallan.com/optimised/sws-bubble.png)
<script>
jQuery(function($) {
$('#sws-stills').waypoint(function() {
$('#work-back').fadeIn( 1500 );
},
{
horizontal:true,
offset: '50%',
});
});
</script>
<script>
jQuery(function($) {
$('#sws-stills').waypoint(function(right) {
$('#work-back').fadeOut( 1500 );
},
{
horizontal:true,
offset: '100%',
trigerOnce: true,
});
});
</script>
This works fine for me (I'm open to any improvment suggestions of course) but if you refresh the browser when your on or past the specified anchor point (i.e. #sws-stills) the nav button fade's in and out and now your kinda stuck.... with the only option to refresh to the 'Home' page.... As you may have noticed by now if you are on my site its a one page website with auto scroll anchors...
Can I fix this issue?
Many thanks in advance...
When you refresh the page, the window is already scrolled to a position where both waypoints should have already fired. This is fine, Waypoints checks for this on waypoint creation and if it has already been reached it triggers the waypoint. The problem in this case is the order of your waypoints. You create the fadeIn waypoint, it triggers. You then create the fadeOut waypoint, it triggers. Switching the order should get you in the state you're looking for.