Chrome、位置修复和javascript问题

就像标题告诉你的，我对Chrome有一些问题

我得到了一张背景图片，涵盖了browsersize的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';
}

这是两个函数，showContent使我的contentbox上升，主菜单下20像素，hideContent使contentbox下降，占整个浏览器的30%，因此您可以看到背景图像。它在除chrome之外的所有浏览器中都能很好地工作

在chrome中，每次我点击按钮，看起来什么都没有发生，但如果我开始移动鼠标，我悬停的部分内容就会弹出，只显示部分内容，看起来真的很混乱。要解决这个问题，我必须刷新页面

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

---

EDIT：这里有一个工作的JSFIDLE javascript函数：

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

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

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

致以最良好的祝愿， 丹尼尔·伦达尔

试试CSS

---

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

听起来这可能是由于使用跳转链接（）时有时会导致固定元素消失的原因造成的。chrome中有一个bug导致了这种情况的发生

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

-webkit-transform: translateZ(0);

---

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

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

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

---

您可以发布一个工作的JSFIDLE示例吗？这里有一个工作的JSFIDLE javascript函数：谢谢您的示例，但是我不确定它有什么问题。。在chrome和ff中似乎也是如此。是的，它在JSFIDLE中工作，但在我的网站上不工作。不知道里面有没有什么奇怪的东西。这是一个drupal站点。不知道位置：固定；任何一个