0

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

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

但是，对于我尝试过的任何 javascript 解决方案，导航栏都有一些已知问题：

路线 #1) Chris Coyier 的平滑滚动

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

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

什么有效 - 图像的下一个和上一个链接按钮有效（点击 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 兼容（因此当单击另一个图像轮播 # 锚标记时它不会自行移动）？

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

4

1 回答 1

2

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

这是演示

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;});
    }
于 2012-07-04T09:53:05.490 回答