導航Chrome在滾動並點擊後消失

我正在爲我發佈的Android應用程序的小型網站工作，但我遇到了一個小問題，我似乎無法找到答案。導航Chrome在滾動並點擊後消失

在Firefox中，一切正常，但當您滾動然後點擊導航鏈接（只需使用ID向下移動頁面），但在Chrome上，導航會消失，直到您再滾動一些爲止。

這是我申請的唯一方式：

#navBar { 
    background-color:#000; 
    position:fixed; 
    width:100%; 
    font-family:sans-serif; 
    font-weight:bold; 
    font-size:13pt; 
    height:70px; 
}

編輯：因爲我已經刪除的網站從導航欄固定的位置，所以你會不會在那裏再看到問題。問題尚未解決。

您可以使用Developer Tools或任何其他等效工具輕鬆地添加固定到navBar元素的位置以查看問題。

來源

2013-07-06 Corey Horn

您的視口語句中存在拼寫錯誤。它應該是「初始規模」而不是「初始規模」。不確定它是否相關，但你應該糾正並檢查。 – redGREENblue

謝謝，我已更新了正確的拼寫，但問題似乎仍在繼續。 –

參見下面的馬修R的答案。設置'top：0;'應該這樣做。或者試試'position：absolute;頂部：0;'如果有一個小故障 –

加入這個時候你的導航欄CSS

-webkit-transform: translateZ(0);

使其

#navBar { 
    background-color: #000; 
    width: 100%; 
    position: fixed; 
    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 14pt; 
    height: 70px; 
    -webkit-transform: translateZ(0); 
    z-index: 1; 
    box-shadow: 0 2.5px 20px #000; 
}

來源

2013-07-15 13:50:38

這是什麼。我已經拿出了位置：現在由於移動設備而修復，但是這爲Chrome解決了問題。 –

你可以把它標記爲已解決嗎？ –

親愛的上帝。我一直在對付一個在垂直滾動中導致元素在整個頁面中間歇出現/消失的錯誤。我沮喪地甩掉了我的臉。謝謝。 – dudewad

我不知道怎麼回事。但是我會拋出我最好的猜測，因爲沒有人回答。

下看起來像一個很好的候選人扭曲行爲：

function switchTabs(e) { 
    $('a#currentTab').removeAttr('id'); 
    $(e).children('a').attr('id','currentTab'); 
}

id是屬性不是一個屬性，添加和刪除IDS似乎是一個非常糟糕的主意，因爲這是在DOM元素如何具有獨特鑑定。這是我不會搞亂的。另外，通過類別重新創建所需的功能很容易：

function switchTabs(e) { 
    $('a.currentTab').removeClass('currentTab'); 
    $(e).children('a').addClass('currentTab'); 
}

也許我運氣好？

來源

2013-07-07 00:43:33

不幸的是，這並沒有幫助我。如果您想繼續嘗試幫助，我已經做出了這些更改並將它們推送到服務器。感謝您的嘗試。 –

這可能是，這有利於使用滾動：

這將使更多的用戶友好的，因爲它是gracefull和問題（我想）是一個事實，即Chrome不註冊，因爲當前的位置變化方法。

$("#button").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#elementtoScrollToID").offset().top 
    }, 2000); 
});

來源

2013-07-09 11:47:55 SMillerNL

我還沒有嘗試這個，因爲添加了額外的JavaScript，但這可能是唯一的解決方案。如果這是解決方案，那麼鉻的位置固定有一些問題... –

我認爲它有一個與腳本的位置變化的問題。 – SMillerNL

在這裏陪伴@SMillerNL。 Opera Mobile過去有一個與'position：fixed;'類似的問題。它與滾動後重新繪製頁面的方式有關。您甚至可以通過在滾動後將它們鼠標移到它們上面來重新定義具有定義的「：hover」狀態的按鈕。通過使用jQuery的'animate（）'強制引擎重繪可能是你最好的選擇。您始終可以縮短動畫以使其與當前狀態類似。 – joequincy

您應該將top: 0添加到您的元素。無論如何，這將使其與頁面的頂部對齊。您可能需要將填充添加到內容包裝的頂部，以便它永遠不會被導航覆蓋。

來源

2013-07-10 14:55:52

謝謝你的嘗試，但那不行。 –

請用下面的代碼替換你的CSS

nav { 
     background: none repeat scroll 0 0 #000000; 
     display: block; 
     position: absolute; 
     margin-left: 115px !important; 
     float: left; 
     height: 70px; 
     margin-left: 10%; 
     width: 40%; 
    }

來源

2013-07-13 10:38:28

我只是說了兩件事我的作品無論是在Chrome和Firefox中，它都運行良好。我點擊鏈接並滾動了一下，導航保持其預期狀態。

For #navBar 
position: fixed; 

For #wrapper 
padding-top: 70px;

來源

2013-07-15 18:12:54

導航Chrome在滾動並點擊後消失

回答

相關問題