2

我将 jQuery Waypoints 插件与单页网站上的固定菜单结合使用。菜单由一个向上和向下箭头组成，当路点被传递时，我使用 jQuery 将向上和向下箭头中的链接更改为下一页或上一页。当按下按钮时，我使用 jQuery 滚动滚动到该页面。它工作得很好，我不确定我以前是否见过以这种方式使用的 jQuery 航路点。感谢您的出色插件！

但是，我正试图让我的网站完全响应，并且我有一个问题，我认为是刷新航点信息。调整窗口大小时，页面高度（在定义航点时计算）不会改变。这会导致滚动距离不正确。

我是一名学生，我的代码有点乱，可能效率有点低，但我的网站的测试版可以在这里看到：http: //beta.kyleboulay.com

再次说明一下：当您在页面首次加载后调整窗口大小时会出现问题，距离没有重新正确计算。

编辑：我似乎通过将路点的偏移值更改为 50% 来解决问题。但是，知道如何在窗口调整大小时触发航点的重新定义仍然很棒。

任何帮助将不胜感激！谢谢。

以下是我的代码示例。

我这样定义我的航点：

//first get all the pages // this returns my six pages

sections = $(".pages");

//then define what happens as each waypoint is passed, depending on the direction**

$(sections[5]).waypoint({

    handler: function(event, direction){

                //console.log('5');
                distanceDown = $(sections[5]).offset().top;
                distanceUp =  $(sections[4]).offset().top;

                if(direction==='up'){

                    //console.log('5 up');
                    distanceDown = $(sections[5]).offset().top;
                    distanceUp =  $(sections[3]).offset().top;

                }

    },

    offset: '50%'

});

//then when the down or up button is pressed on the menu, i do the following:

$('#icon-up').click(function(){

$('html, body').animate({ scrollTop: distanceUp }, { duration: slideSpeed, easing: 'swing' });

});//end inline
4

0 回答 0