JS 写一个导航栏下划停留在顶部
时间: 2024-05-01 08:18:09 浏览: 21
可以通过CSS实现这个效果,具体步骤如下:
1. 为导航栏添加一个固定的位置,使其不随滚动条滚动:
```css
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
```
2. 在导航栏下面添加一个占位元素,使页面正常显示:
```css
.navbar + .content {
padding-top: 50px; /* 导航栏高度 */
}
```
3. 当页面滚动时,为导航栏添加一个下划线,并保持在顶部:
```css
.navbar.scroll {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
border-bottom: 1px solid #ccc; /* 添加下划线 */
}
.navbar.scroll + .content {
padding-top: 100px; /* 导航栏高度+下划线高度 */
}
$(document).scroll(function() {
var navbar = $('.navbar');
if ($(this).scrollTop() > navbar.height()) {
navbar.addClass('scroll');
} else {
navbar.removeClass('scroll');
}
});
```
上面的代码中,$(document).scroll()方法监控页面滚动的事件,如果scrollTop()的值大于导航栏的高度,则为导航栏添加一个scroll的CSS类,实现下划线固定在顶部的效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)