在移动 safari、iphone 上选择具有固定位置的 div 内的菜单答案

【问题标题】：select menu inside a div with fixed position on mobile safari, iphone在移动 safari、iphone 上选择具有固定位置的 div 内的菜单
【发布时间】：2013-05-09 15:08:15
【问题描述】：

我正在构建一个具有固定位置的标题的站点，其中包含一个选择菜单。由于位置：在css中固定，标题应该保持锁定在屏幕顶部。但是，当在 iphone 上单击移动 safari 中的选择菜单时，当 ios 选择菜单打开时，标题不再锁定在顶部。似乎 ios 正在将带有选择菜单的 div 居中到菜单上方屏幕的可见区域。当页面滚动到顶部时不会发生这种情况，但是当地址栏不可见时，它会像这样“中断”。没有找到其他答案，也许我问错了问题。我还不能发布代码链接，感谢任何帮助。

http://selfconstruc.tv/menu-open.PNG http://selfconstruc.tv/menu-closed.PNG

【问题讨论】：

IOS上有很多关于position:fixed问题的文章。在 IOS 5.1.1 或更早版本中，它不起作用。在更新的版本中，它可以工作，但有一些问题。看到这个Issues with position fixed & scrolling on iOS
感谢 nmoliveira。焦点跳跃准确地描述了我所看到的。

标签： iphone select fixed

【解决方案1】：

目前我认为没有完美的解决方案来处理焦点跳跃。在我的情况下，我将标题隐藏在焦点上并再次显示在焦点之外，并且效果很好。我不知道在您的情况下这是否是一种解决方法。

你可以试试这个：

// detect ios device
if(navigator.userAgent.match(/(iPad|iPhone|iPod)/gi)){
  // hide header on focus in and show on focus out
  jQuery("#content").focusin(function(){
    jQuery('#your-header-id').hide();
  })
  jQuery("#content").focusout(function(){
    jQuery('your-header-id').show();
  })
}

#content 是一个 div，您应该在其中拥有所有控件，jQuery .focusin() 检测父元素上的焦点事件，因此每个控件都会触发焦点事件。您将标题隐藏在焦点上并在此之后显示。希望这会有所帮助！

【讨论】：