在滚动页面时,将两个导航栏中的第二个保持在顶部可以通过以下步骤实现:
.navbar2 {
position: fixed;
top: 0;
}
window.addEventListener('scroll', function() {
var navbar2 = document.querySelector('.navbar2');
var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPosition > 0) {
navbar2.style.display = 'block';
} else {
navbar2.style.display = 'none';
}
});
上述代码中,.navbar2
是第二个导航栏的CSS类名,可以根据实际情况进行修改。
这样,当页面滚动时,第二个导航栏将始终保持在页面顶部,并在页面顶部时显示,其他位置时隐藏。
这种技术常用于创建固定在页面顶部的导航栏,以提供更好的用户体验和导航功能。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云