Question

所以我一直在尝试使用RootsTheme（使用Bootstrap），Wordpress（来自Joomla！背景）和Pagodabox;

这是结果：http://ajmalafif.com/

但是我在导航栏中遇到了一些已知的问题，我尝试过任何javascript解决方案：

路线＃1）Chris Coyier的顺畅滚动

目前我的网站在这个网站上运行。

什么行不通 - 对于较小的屏幕或浏览器调整大小时，导航将在更高的高度处笨拙地停止（因为它设置为在> 1200px的屏幕宽度上偏移-90px）

什么有效 - 下一个＆amp;用于图像工作的上一个链接按钮（单击mysite.com #link在导航栏锚点和图像链接点击锚点之间不会发生冲突）

代码示例：http://jsfiddle.net/ajmalafif/LvPUC/1/

路线＃2）William Malo的getElementbyId

我首先喜欢并使用此解决方案。

什么行不通 - 它没有偏移解决方案，所以它直接停在h1标题上并阻止它的视图。 - 它与bootstrap-carousel.js冲突，点击图像轮播后，屏幕/导航栏将移动并将图像与浏览器顶部对齐。

什么有效 - 它适用于任何浏览器大小（并在调整大小后）和目标/相应地到达。

代码示例：http://jsfiddle.net/ajmalafif/bReUF/

-

看起来路线＃1可能是明显的赢家，但就像我网站上正在运行的那样，它几乎没有任何故障，尤其是在iPad上查看时。那么是否有任何指针/帮助可以让它通过;

无论浏览器宽度如何，都可以准确地偏移href目标（可能是基于diff浏览器宽度的diff偏移的解决方案）？或者
使用getElementbyId解决方案时的偏移方法（参见路线＃2）并使其与bootstrap-carousel.js兼容（因此当点击另一个图像轮播#asso tag时它不会自动移动）？< / p>

感谢您的关注和时间来看一看。

Answer 1

您可以计算浏览器的高度并返回该变量的滚动值;

here is DEMO

var browH = $(window).height();
            //alert(browH);
    if ( browH < 500 ) {
      $(scrollElem).animate({scrollTop: targetOffset-80}, 800,function() { location.has = target;});
    }
    else if ( browH > 500 ) {
       $(scrollElem).animate({scrollTop: targetOffset-80}, 400,function() { location.has = target;});
    }

jQuery平滑滚动导航菜单栏

1 个答案: