js缩小窗口时显示导航栏
时间: 2023-08-15 18:07:31 浏览: 63
可以通过监听窗口大小改变事件,来实现在缩小窗口时显示导航栏。具体做法如下:
1. 在页面中添加导航栏的HTML代码,并设置其样式为`display: none`,即默认隐藏导航栏:
```html
<nav id="navbar" style="display: none;">
<!-- 导航栏内容 -->
</nav>
```
2. 使用JavaScript监听窗口大小改变事件。当窗口宽度小于一定值时,显示导航栏;否则隐藏导航栏。以下是示例代码:
```javascript
var navbar = document.getElementById("navbar");
window.addEventListener("resize", function() {
if (window.innerWidth < 768) { // 当窗口宽度小于768px时显示导航栏
navbar.style.display = "block";
} else { // 否则隐藏导航栏
navbar.style.display = "none";
}
});
```
以上代码中,`window.innerWidth`表示当前窗口的宽度,判断条件中使用768是因为在Bootstrap中,屏幕宽度小于768px时会切换为移动设备样式。你可以根据需要自行调整判断条件。
需要注意的是,监听窗口大小改变事件会导致频繁的DOM操作,可能会影响页面性能,建议谨慎使用。