2012-05-25 72 views
0

像标题告诉你,我有一些问题与Chrome。铬,位置固定,和JavaScript问题

我得到了一个涵盖浏览器大小的100%宽度和高度自动的backgroundimage。该位置设置为固定。这适用于所有浏览器。 但是,我想让我的footermenu位置固定,并且它只是不想停留在Chrome页面的底部!

这是在底部,只要我不滚动。当我滚动时,footermenu上升。它只在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上去,20像素下方的主菜单,hideContent使得contentbox下去,整个浏览器的30%,所以你可以看到背景图片。它在所有的浏览器,除了铬...

在铬,每次我点击按钮,它看起来像什么都没有发生,但如果我开始移动鼠标左右,我悬停的内容的一部分开始弹出并且只显示了部分内容,看起来真的很混乱。为了摆脱这一点,我必须刷新页面。

请帮我解决我的问题。我试过了解我所知道的一切,但它不起作用。

编辑:这里有JavaScript函数工作的jsfiddle:http://jsfiddle.net/Z8XPA/4/

* * EDIT2:这里是位置固定的我想成为footermenu的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; 
} 

最好的问候, 丹尼尔伦达尔

+0

你可以发布一个工作jsfiddle的例子吗? – Wesley

+0

在这里,你有一个工作jsfiddle的JavaScript函数:http://jsfiddle.net/Z8XPA/4/ – Daniel

+0

感谢您的例子,但我不知道它有什么问题..似乎也做同样的铬和ff在这里。 – Wesley

回答

0

尝试CSS

体,HTML {身高:100%,宽度:100%}

0

这听起来像这可能是由引起同样的事情引起的固定元素在使用跳转链时有时会消失(Fixed element disappears in Chrome)。 Chrome中存在导致此问题发生的错误。

这对我来说是添加此在固定元件上工作的解决方案:

-webkit-transform: translateZ(0); 
0

只需添加位置:粘(供应商前缀),我们可以告诉一个元素是位置:相对的,直到用户滚动该项目(或其父项)距顶部15px:

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

顶部:15px,元素变得固定。

source