浏览器刷新时航点混淆

Question

我有一个导航元素，当它碰到指定的锚点时会淡入，当它 returns 回到原来的位置时会淡出：这都是由偏移量控制的路点 jquery 完成的:

（请查看 http://jamesanthonyallan.com/ 并导航至 'Work'，然后点击粉色兔子头像

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>

这对我来说很好用（当然我愿意接受任何改进建议）但是如果你在打开或超过指定的锚点（即#sws-stills）时刷新浏览器，导航按钮会淡入并且出来，现在你有点卡住了....只有刷新到 'Home' 页面的选项....你现在可能已经注意到，如果你在我的网站上，它是一个带有自动滚动锚点的单页网站...

我可以解决这个问题吗？

非常感谢...

Answer 1

当您刷新页面时，window 已经滚动到 waypoints 应该已经触发的位置。这很好，Waypoints 在路点创建时检查它，如果已经到达它会触发路点。本例中的问题是您 waypoints 的顺序。您创建 fadeIn 航路点，它会触发。然后您创建 fadeOut 航路点，它会触发。切换顺序应该会让您进入您正在寻找的状态。

浏览器刷新时航点混淆

Waypoint confused when browser refreshed

page-refresh

jquery-waypoints