Question

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

但是，我正在尝试使我的网站完全响应，而我遇到的问题是我认为路线点信息的更新。调整窗口大小时，页面的高度（在定义航点时计算）不会改变。这会导致滚动距离不正确。

我是学生，我的代码有点混乱，可能效率不高但我的网站的测试版可以在这里看到：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

在窗口调整大小时重新计算航点元素的高度

0 个答案: