Question

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

// 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（打开移动视图选项）

我的问题是我该如何解决？

Answer 1

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

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

不幸的是，因为菜单的可见打开部分位于菜单的滚动版本内，所以当粘贴被激活导致空白时，这也会被设置为visibility: hidden。

当粘贴被激活时，您可能想要触发某些内容以便在粘性中显示菜单的打开部分（在菜单的滚动版本中打开）。

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

1 个答案: