Bootstrap 导航栏无法打开 - 移动视图答案

【问题标题】：Bootstrap navbar doesn't open - mobile viewBootstrap 导航栏无法打开 - 移动视图
【发布时间】：2015-08-07 10:09:32
【问题描述】：

我有一个带有此代码的粘性导航（这不是我的）

// Create a clone of the menu, right next to original.
$('nav').addClass('original').clone().insertAfter('.navbar-default').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}

它在桌面视图上运行良好，但在移动设备上，当我尝试打开菜单时，菜单无法打开并且页面会打开。这是一个示例：http://www.bootply.com/UYrOA0xDqa（打开移动视图选项）

我的问题是如何解决它？

【问题讨论】：

打开了吗？只是没有固定的定位。
这适用于我的情况。移动视图没有问题。所以我认为你应该重新检查页面链接。
同意。似乎工作正常。您通过什么浏览器或条件获得这些结果？
@code.prio 这是一个视频，也许现在更清楚了，浏览器是谷歌浏览器：screencast.com/t/OPdLiZqzp，它只发生在我的浏览器中吗？
@Phil.Wheeler 我添加了一个视频，您可以查看一下吗？

标签： jquery twitter-bootstrap navbar sticky

【解决方案1】：

问题出在代码中名为stickIt 的函数中/周围。

我假设您正在做的是隐藏菜单的滚动版本并在菜单顶部滚动超过页面顶部边缘时显示菜单的粘性版本。您通过设置visibility: hidden 来执行此操作。

不幸的是，由于菜单的可见打开部分位于菜单的滚动版本中，因此当激活粘性时会设置为visibility: hidden，从而导致空白。

当粘性激活时，您可能还想触发一些东西以在粘性中显示菜单的打开部分（它在菜单的滚动版本中打开）。

【讨论】：