Javascript 如何创建可滚动的水平导航菜单，但在用户窗口向下滚动时显示

我想创建一个必须水平滚动的导航菜单。但当用户在浏览器（移动+桌面）中向下滚动窗口时，应显示此导航

我已经尝试过这个代码，这样导航菜单显示在滚动底部之后，但它的项目不会水平滚动。移除位置时：固定，则其项目水平滚动

因此，我希望这两个功能滚动导航水平+显示导航菜单栏时，用户向下滚动窗口

window.onscroll=function（）{
scrollFunction（）
};
函数滚动函数（）{
if（document.body.scrollTop>150 | | document.documentElement.scrollTop>150）{
document.getElementById（“导航”）.style.top=“0”；
}否则{
document.getElementById（“导航”）.style.top=“-150px”；
}
}

#导航{
顶部：-50px；
位置：固定；
}
.导航头{
背景：#002347；
颜色：#ffffff；
}
.导航头a{
颜色：#ffffff；
}
.导航头导航{
宽度：100%；
}
.项目清单{
填充：6px 12px；
}
.itemlist:不是（：最后一个子项）{
右边框：1px实心#ece4e4；
}
.项目清单{
字号：17px；
字体大小：粗体；
}
.项目清单，
.中心{
光标：指针；
垂直对齐：中间对齐；
显示：内联块；
}
.scrolltab{
溢出-x：自动；
空白：nowrap；
-webkit溢出滚动：触摸；
-ms溢出样式：-ms自动隐藏滚动条；
}
.scrolltab:：-webkit滚动条{
显示：无；
}

关于我们
网络解决方案
Web应用程序
脚本语言
Andriod应用
接触
Lorem ipsum door dummy text sit amet，concetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
我的心在我的心上，我的心在我的心上。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

要使导航栏水平滚动，需要为包含的元素指定一个宽度。i、 e.添加

#navigation {
  width:100%;
}

还有，你有

.scrolltab::-webkit-scrollbar {
    display: none;
}

---

我不确定您是否出于某种原因需要此功能，但至少在Microsoft Edge和Chrome上，它会导致滚动条不出现。删除它会使菜单可滚动。

您的意思是希望菜单水平显示整个窗口的宽度，并且只显示在特定的滚动点之后吗？我不知道你说的“水平滚动的导航菜单”是什么意思？我不知道我们如何滚动它，它目前只有五个项目。水平滚动与垂直滚动相同，但在X轴上。或者你有一个示例网页给我看吗？嘿@LaurentC，是的，我的意思是当宽度超过浏览器窗口时，菜单项应该在X轴上滚动。在这种情况下，整个导航菜单应该在一个滚动点后显示，即150。