写一个 js 固定导航栏 浏览器可视尺寸大于1000时 固定导航栏显示小于1000 隐藏
时间: 2023-06-03 22:01:44 浏览: 88
好的,这是一个关于编程的问题,我可以为您提供解答。
您可以在 JavaScript 中使用以下代码来实现固定导航栏:
```javascript
window.onscroll = function() {myFunction()};
let navbar = document.getElementById("navbar");
let sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
```
其中,`navbar` 是您固定的导航栏元素的 ID,`sticky` 是元素的 offsetTop。当页面滚动到一定距离时,添加或删除 `sticky` 类可以实现固定导航栏的效果。
另外,您可以在 CSS 中设置导航栏元素的默认样式,例如:
```css
#navbar {
position: fixed;
top: 0;
width: 100%;
}
```
这样,在页面刚开始加载时,导航栏就已经固定在页面顶部了。当然,您需要根据您的具体需求去调整样式。
最后,根据您的需求,您可以在 CSS 中添加媒体查询,以支持在浏览器可视尺寸小于 1000 时隐藏导航栏。例如:
```css
@media (max-width: 1000px) {
#navbar {
display: none;
}
}
```
这样,当浏览器可视尺寸小于 1000 时,导航栏将被隐藏。