javascript - 滚动时更改导航的背景
问题描述
我试图在滚动时更改 NAV 的背景。我已经做的如下。我不知道还能做什么!
CSS
html, body{
margin:0;
padding:0;}html{
font-family: Poppins,sans-serif;}.jumbotron{
text-align:center;
color:red;
background-image: url(IMG/dyta.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
height:100vh;
padding-top:100px;}header{
z-index:1;
position:fixed;
display:flex;
width:100vw;
height:100px;
margin-left:80px;
font-size:20px;
line-height:100px;
color:white;}div.logo{
width:40%;}ul.header-menu-ul{
display:flex;}li.header-menu-li{
list-style:none;
margin-left:auto;
margin-right:auto;}.header-menu-li a{
text-decoration:none;
color:white;
text-transform:uppercase;
letter-spacing:2px;
font-weight: 600;
font-size:14px;
font-family: Poppins,sans-serif;}.header-nav.scrolled {
background-color: #fff;
transition: background-color 200ms linear;}
HTML
<header class="container-fluid header-nav">
<div class="logo text-center">
<i class="fab fa-google"></i>
</div>
<nav class="container-fluid nav-items text-center">
<ul class="header-menu-ul nav-links">
<li class="header-menu-li"><a title="AboutUs" href="#">About Us</a></li>
<li class="header-menu-li"><a title="Services" href="#">Services</a></li>
<li class="header-menu-li"><a title="OurProjects" href="#">Our Projects</a></li>
<li class="header-menu-li"><a title="News" href="#">News</a></li>
<li class="header-menu-li"><a title="Contact" href="#">Contact</a></li>
</ul>
</nav></header>
<div class="jumbotron section text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
JavaScript
$(function () {$(document).scroll(function () {
var $nav = $(".header-nav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});});
我已经被困在这三天了,我不知道还能做什么!我不知道我的问题在哪里。有人可以帮我吗?
解决方案
尝试这个
$(function () {
$(document).scroll(function () {
if($(this).scrollTop() > $(".header-nav").height()) {
$(".header-nav").addClass('scrolled');
}
});
});
推荐阅读
- python - 如何创建要查询的 dict 作为示例
- python - Azure-cli 无法在 termux 上添加扩展
- spring-cloud - 从 Spring 云数据流服务器启动时将自定义环境变量传递给云任务
- javascript - 根据另一个表中的行 ID 从一个表中选择帖子内容
- docker - 如何在 docker 中运行 phinx?
- python - add line between points in pyvista plotter
- php - 如何在 PHP Slim3 中显示 Uploads 目录中的图像?
- r - 检查R中的列表中是否存在数据框列值
- swift - 如何在 iOS13.6.1 下获取 Siri Shortcuts 的语音听写?
- powershell - 格式化 Get-WmiObject 脚本的结果以匹配来自 get-content .txt 文件的列表