要创建可滚动的水平导航菜单,并在用户窗口向下滚动时显示,可以使用以下步骤:
<nav>
,并在其中添加一个无序列表 <ul>
,每个导航项使用 <li>
元素表示。<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<!-- 添加更多导航项 -->
</ul>
</nav>
nav {
height: 50px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #f1f1f1;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
li {
display: inline-block;
margin-right: 20px;
}
a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
window.addEventListener('scroll', function() {
var nav = document.querySelector('nav');
if (window.pageYOffset > 0) {
nav.style.display = 'block';
} else {
nav.style.display = 'none';
}
});
以上代码将导航菜单容器设置为固定定位,并在用户向下滚动时显示,向上滚动时隐藏。导航菜单使用水平滚动来容纳更多的导航项。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云