2012-05-25 129 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