Navbar锚点没有正确指向js

时间:2014-07-15 01:57:59

标签: javascript jquery html css twitter-bootstrap

这可能只是我挑剔但我有一点难以描述的问题。在我的练习网站here上,导航栏(我最终工作得很好)有一个问题,一旦窗口调整到必要的宽度以下变成下拉列表,网站就不再滚动到顶部每个部分。相反,它似乎滚动到部分的顶部减去/加上菜单下拉的高度。由于我在选择链接后选择让菜单崩溃,我认为理想的解决方案是在菜单完全折叠后滚动页面。也许这会有所帮助。有关如何实现这一目标的任何建议?您应该能够在源代码中看到'scripts.js'文件,我已经完成了什么。

编辑:进一步检查后,我发现只有在导航栏已经固定到顶部(因此在“工作”部分下方的任何位置)重新加载页面后才会出现此问题。 我希望我可以通过屏幕捕获更好地展示,但是为我复制的最佳方式似乎是在页面的各个位置重新加载后尝试链接。
例如 - 如果你在底部重新加载页面,那么尝试下拉菜单,你会在提供的图片中看到这个场景:

图片1: enter image description here

图片2: enter image description here

1 个答案:

答案 0 :(得分:0)

在调整大小时,使用.off()语句删除事件,然后使用.on()重新添加它们。问题是,当您附加事件时,它会在页面上使用固定点,但是当您调整浏览器大小时,这些点将不再位于页面上的正确位置。通过这样做,您将更新浏览器滚动到的位置。

例如:

$(window).on('resize', function(){
    // remove whaetver events you have attached
    $('#navbar').off('event names go here');

    // Re-attach the events
    $('#navbar').on('event names go here');
});