手机：滚动后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内容消失

回答