Chrome、位置固定和 javascript 问题答案

【问题标题】：Chrome, position fixed, and javascript problemsChrome、位置固定和 javascript 问题
【发布时间】：2012-05-25 12:14:12
【问题描述】：

正如标题所说，我在使用 Chrome 时遇到了一些问题。

我得到了一个背景图像，它覆盖了浏览器大小的 100% 宽度和高度。位置设置为固定。这适用于所有浏览器。但是后来我想固定我的页脚菜单位置，它只是不想停留在 Chrome 的页面底部！

只要我不滚动，它就在底部。当我滚动时，页脚菜单会上升。它仅在 Chrome 中以这种方式运行。有人知道我该如何解决吗？

另一件事是我有一些看起来像这样的javascript：

function showContent() {
    document.getElementById('showbox').style.marginTop = '20px';
    document.getElementById('showcontent_btn').onclick = function() {hideContent();} 
    document.getElementById('showcontent_btn').id = 'hidecontent_btn';
}

function hideContent() {
    document.getElementById('showbox').style.marginTop = '30%';
    document.getElementById('hidecontent_btn').onclick = function() {showContent();} 
    document.getElementById('hidecontent_btn').id = 'showcontent_btn';
}

这是2个功能，showContent让我的contentbox向上，在主菜单下方20px，hideContent让contentbox向下，占整个浏览器的30%，这样就可以看到背景图了。它适用于所有浏览器，除了 chrome...

在 chrome 中，每次单击按钮时，似乎什么都没有发生，但是如果我开始移动鼠标，我悬停的部分内容开始弹出，并且只显示部分内容并且它看起来真的很乱。为了摆脱这种情况，我必须刷新页面。

请帮我解决我的问题。我已经尝试了我所知道的一切，但它不起作用。

编辑：这里有一个 javascript 函数的工作 jsfiddle：http://jsfiddle.net/Z8XPA/4/

**EDIT2：这是我想要定位的页脚菜单的 HTML 和 CSS： HTML：

<div id="footer_menu"><?php print render($page['footer_menu']); ?></div>

CSS：

#footer_menu { 
    position:fixed; 
    z-index:2; 
    bottom:0px; 
    width:100%;
    height:45px;
    background:rgba(0,0,0,0.5) !important;
    background-color:#000000;
}

最好的问候，丹尼尔·伦达尔

【问题讨论】：

你能发布一个有效的 jsfiddle 示例吗？
这里有一个 javascript 函数的工作 jsfiddle：jsfiddle.net/Z8XPA/4
感谢您的示例，但我不确定它有什么问题。似乎在 chrome 和 ff 中也是如此。
是的，它适用于 jsfiddle，但不适用于我的网站。不知道里面有没有什么奇怪的东西。这是一个drupal网站。不知道位置：固定；要么？

标签： javascript css google-chrome position fixed

【解决方案1】：

试试 CSS

body,html{height:100%,width:100%}

【讨论】：

【解决方案2】：

听起来这可能是由于使用跳转链接时导致固定元素有时消失的同一件事（Fixed element disappears in Chrome）。 chrome 中有一个错误会导致这种情况发生。

对我有用的解决方案是将其添加到固定元素：

-webkit-transform: translateZ(0);

【讨论】：

【解决方案3】：

通过简单地添加 position:sticky （供应商前缀），我们可以告诉一个元素是 position: relative 直到用户滚动项目（或其父项）到距离顶部 15px：

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}

在顶部：15px，元素变为固定。

source

【讨论】：