手機：滾動後ul內容消失

我正在爲我公司網站atm的導航欄工作。我們使用WordPress的基本東西，導航欄必須手動編碼在CSS和HTML。在這裏，你有這個網站是目前正在工作： 鏈接不可用 在桌面上，該網站的工作很好，但在移動設備上，我們有一個小問題。手機：滾動後ul內容消失

當點擊其中一個li元素時，該站點向下滾動到特定產品。在移動瀏覽器上執行此操作，直到您自己滾動並單擊另一個li元素。然後ul的內容將消失，但li元素仍然可以點擊。再次滾動會讓元素出現。

這裏的導航欄的代碼片段：

.kategorien{ 
 
position: fixed; 
 
list-style-type: none; 
 
margin: 5px; 
 
padding: 0; 
 
overflow: hidden; 
 
overflow-y: hidden; 
 
overflow-x: scroll; 
 
background-color: #888; 
 
text-decoration: none; 
 
min-width: 100%; 
 
width: 18%; 
 
height: 86px; 
 
text-align: center; 
 
white-space: nowrap; 
 
-webkit-overflow-scrolling: touch; 
 
&::-webkit-scrollbar { 
 
} 
 
} 
 

 
.kategorien .link{ 
 
background-size: 100px, 100%; 
 
background-repeat: no-repeat; 
 
text-align: center; 
 
text-decoration: none; 
 
} 
 
.link1{ 
 
background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/05/Icon_mechatronische-Bauteile.png); 
 
} 
 
.link2{ 
 
background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/05/Icon_Tuer.png); 
 
} 
 
.link3 { 
 
background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/08/Schloss-e1503557362607.png); 
 
} 
 
.link4 { 
 
background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/05/Icon_sitz.png); 
 
} 
 

 
.link5 { 
 
background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/08/RSG.png); 
 
} 
 

 
.kategorien li { 
 
padding-left: 10px; 
 
padding-right: 10px; 
 
font-size: 11px; 
 
display: inline-block; 
 
} 
 

 
.kategorien li a{ 
 
display: block; 
 
color: white; 
 
padding-top: 50px; 
 
padding-right: 30px; 
 
padding-left: 30px; 
 
text-decoration: none; 
 
} 
 

 
.kategorien a:hover{ 
 
color: #6bf; 
 
}

<ul class="entry-content kategorien"> 
 
<li><a class="link link1" href="#tueren">Türen</a></li> 
 
<li><a class="link link2" href="#fenster">Fenster</a></li> 
 
<li><a class="link link3" href="#schloss">Schloss</a></li> 
 
<li><a class="link link4" href="#sitz">Sitz</a></li> 
 
<li><a class="link link5" href="#rsg">RSG</a></li> 
 
<li><a class="link link4" href="#sitz">Sitz</a></li> 
 
<li><a class="link link2" href="#fenster">Fenster</a></li> 
 
<li><a class="link link3" href="#schloss">Schloss</a></li> 
 
<li><a class="link link4" href="#sitz">Sitz</a></li> 
 
<li><a class="link link2" href="#fenster">Fenster</a></li> 
 
</ul>

請讓我知道如果有什麼我可以添加到這個代碼來解決這個問題，或者您需要進一步的信息。僅供參考：代碼必須在css和html中完成。

來源

2017-08-28 SeriousSimon

我無法重現您的問題。你能告訴我你正在使用哪個設備和哪個瀏覽器？ – Huelfe

當然。我在Safari上使用iPhone 5s（iOS 10.3.1）。 – SeriousSimon

試試這個CSS

@media (max-width: 980px) { 
    .et_fixed_nav #top-header { 
    position: fixed !important; 
    } 
}

來源

2017-08-28 11:43:19 Ezzuddin

不解決問題。 – SeriousSimon

現在你可以使用它了。 – Ezzuddin

供參考：您正在設計頂級菜單/頂部標題，但這不是我的問題的根源。它位於.kategorien和導航欄中，您可以在代碼段中看到它。 – SeriousSimon

@media all and(max-width: 980px) { 
    .et_fixed_nav #top-header { 
    position: fixed !important; 
    } 
#top-menu { 
    display: block !important; 
} 
}

這應該解決您的問題，但沒有很好的解決辦法。

來源

2017-08-28 12:00:53 Era

不能解決問題。僅供參考：您正在設計頂級菜單/頂部標題，但這不是我問題的根源。它位於.kategorien和導航欄中，您可以在代碼段中看到它。 – SeriousSimon

@SeriousSimon：你在哪裏把我給你的CSS？我已經編輯了我的答案。請立即檢查。 – Era

我正在把

手機：滾動後ul內容消失

回答