Question

滚动时我试图更改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());
});});

我被困在这里三天了，我不知道该怎么办！我不知道我的问题在哪里。谁能帮我吗？

Answer 1

尝试

$(function () {
    $(document).scroll(function () {
        if($(this).scrollTop() > $(".header-nav").height()) {
            $(".header-nav").addClass('scrolled');
        }
    });
});

Answer 2

为内容加总高度以查看代码是否有效，请参见：https://codepen.io/anon/pen/bzbOzv

  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>

滚动时更改导航背景

2 个答案: