移动:UL 内容在滚动后消失

Question

我正在为我的公司网站ATM开发导航栏。 我们使用wordpress进行基本工作，导航栏必须用css和html手动编码。 这里有当前正在工作的网站：链接不可用在桌面上，该网站运行良好，但在移动设备上我们遇到了一个小问题。

当单击其中一个li元素时，网站会向下滚动到特定产品。在移动浏览器上执行此操作可以工作，直到您自己滚动并单击另一个 li-element。然后 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完成。

Answer 1

试试这个css

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

Answer 2

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

这应该可以解决您的问题，但不是好的解决方案。