Question

我的网站在div中有一些调用操作按钮，固定在屏幕底部。

我们目前正在使用一个绝对定位如下的div

<div id="buttonBar">footer code</div>
<style>#buttonBar{ bottom: 0; width: 100%;  position: fixed; }</style>

除了地铁（现代）模式下的IE10之外，这在所有浏览器中都运行良好。

单击链接时，地址栏会显示并覆盖按钮栏，然后消失

除了重新设计页面布局外，我希望按钮栏在显示时位于地址栏的正上方。

有没有人知道使用javaScript检测地址栏是否可见的方法？

Answer 1

您可以尝试将页脚移动到位置栏上方，直到位置栏折叠，然后将页脚放回原位。这是一个潜在的解决方案：

1。如果用户可能在支持IE10触摸的浏览器上，则将页脚向上移动50px（或其他）

if (!!window.navigator.msPointerEnabled) { // sniff for IE10 + touch
    $("#buttonBar").css("transform", "translateY(-50px)");
}

2。听取与浏览器的第一次交互，然后使用位置栏折叠页脚。

$("body").on("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown", function () {
  $("body").off("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown");
  $("#buttonBar").css("transform","translateY(0)");
});

此解决方案并非100％可靠，显然有些交互会使位置栏崩溃，但不会触发事件。我正在研究一个更好的解决方案，并且一旦发现就会更新，但我想我会分享这个以便让球滚动。

使用javascript检测ie10 metro地址栏的存在

1 个答案: