Question

我有一个非画布导航解决方案的代码：

<div class="off-canvas-wrapper">

<div class="navigation-main">

    <div id="navigation-inner">

        navigation

    </div>

</div>

<div class="col-lg-12 page-content">

    content

</div>

</div>

“navigation-main”在画布外推送：

.off-canvas-wrapper {
position: relative;
left: 0;
-webkit-transition: left .3s ease-in;
-most-transition: left .3s ease-in;
transition: left .3s ease-in;
}

.navigation-main {
position: absolute;
top: 0;
width: 300px;
left: -300px;
height: 100%;
padding: 0px;
z-index: 9999;
}

在按钮悬停上，我将“off-canvas-wrapper”设置为活动：

.off-canvas-wrapper.active {
left: 300px;
}

这很有效但在页面内容变长时会将导航保留在页面顶部。为了防止这种情况，我已经修复了“navigation-inner”的位置：

#navigation-inner {
position: fixed;
top: 0;
width: 300px;
}

此解决方案在Chrome和资源管理器中按预期工作（当我滚动页面时导航内部浮动）。

但是，在Firefox（v27.0.1）中，它仅在页面向下滚动至少1个像素时才有效。如果我将鼠标悬停在页面加载“navigation-main”上显示，但“navigation-inner”不可见。如果我在按钮悬停之前向下滚动1个或更多像素，一切都很好。这对我没用。

当浏览器窗口位于最顶层时，是什么让Firefox隐藏“navigation-inner”？
使用固定位置绝对是合法的解决方案吗？我应该这样做吗？

CSS：固定在绝对内部的位置在Firefox中不起作用

0 个答案: