1

我有一个网站，在固定到屏幕底部的 div 中有一些号召性用语按钮。

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

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

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

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

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

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

4

1 回答 1

0

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

1. 如果用户可能在支持 IE10 触控的浏览器上，将页脚向上移动 50 像素（或其他）

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% 可靠，显然有一些交互会折叠位置栏但不会触发事件。我正在研究一个更好的解决方案，一旦找到就会更新，但我想我会分享这个来让事情顺利进行。

于 2013-03-15T17:35:31.833 回答