我希望在这里的网站菜单之上。当用户向下滚动时,它应该更改背景并显示另一个徽标。
为什么这个功能不起作用?它只是一直显示黑色背景。我想让它在被某些px向下滚动时显示。
https://codepen.io/anon/pen/XJdVYr - 我想这样做
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('#menu-logo').slideDown(500);
}
if ($(window).scrollTop() < 50) {
$('#menu-logo').slideUp(500);
}
});
});
.navbar {
width: 950px;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
}
.navbar .navbar-brand {
position: absolute;
left: 0;
}
.navbar .collapse {
padding-top: 40px;
margin-left: 225px;
}
.navbar a {
text-decoration: none;
border-right: 1px solid rgb(153, 153, 153);
font-size: 14px;
font-family: 'Mada', sans-serif, Regular;
color: #000000;
padding: 10px 40px;
}
.navbar a:last-child {
border-right: none;
}
.navbar #menu-logo {
background: rgba(51, 51, 51);
width: 950px;
position: fixed;
height: 95px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
padding-bottom: 95px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<img class="navbar-brand" id="logo" src="images/img2-logo.png" alt="">
<img id="menu-logo" src="images/img-menu.png" alt="">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a class="nav-item nav-link" href="#mission">MISSION</a>
<a class="nav-item nav-link" href="#clients">CLIENTS</a>
<a class="nav-item nav-link" href="#products">PRODUCTS</a>
<a class="nav-item nav-link" href="#contact">CONTACT</a>
</div>
</nav>
请参阅此代码以解决此问题。如你所愿,css会在滚动时改变
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 500) {
console.log($(window).scrollTop());
$('#datacss').css("background-color", "black");
}
if ($(window).scrollTop() < 500) {
console.log($(window).scrollTop());
$('#datacss').css("background-color", "white");
}
});
});
.too-height {
min-height: 2500px;
}
.navbar {
width: 950px;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
height: 100em;
}
.navbar .navbar-brand {
position: absolute;
left: 0;
}
.navbar .collapse {
padding-top: 40px;
margin-left: 225px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="too-height" id="datacss">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<img class="navbar-brand" id="logo" src="images/img2-logo.png" alt="">
<img id="menu-logo" src="images/img-menu.png" alt="">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a class="nav-item nav-link" href="#mission">MISSION</a>
<a class="nav-item nav-link" href="#clients">CLIENTS</a>
<a class="nav-item nav-link" href="#products">PRODUCTS</a>
<a class="nav-item nav-link" href="#contact">CONTACT</a>
</div>
</nav>
</div>