滚动后更改标识

Question

我该怎么办才能拥有这样的东西？当我开始滚动时，我希望.light-logo类中的标识（logo-white.jpg）在它进入导航栏后立即消失。滚动到达导航栏后，必须在那里出现一个标识（logo-dark.jpg）。

我的知识很差，所以，拜托，我真的很感谢你的详细答案和解释。

$(document).ready(function() {
  var navbarOffest = $(".navbar").offset().top;

  $(window).on("scroll", function() {
    var navbarHeight = $(".navbar").outerHeight();

    if ($(window).scrollTop() >= navbarOffest) {
      $(".navbar").addClass("navbar-fixed-top");
      $("body").css("padding-top", navbarHeight + "px");
    } else {
      $(".navbar").removeClass("navbar-fixed-top");
      $("body").css("padding-top", "0");
    }
  });
});

nav.navbar {
    background: #fff;
    color: #1e1d1f;
    border-bottom: none;
    border-radius: 0;
    padding: 15px 0;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

nav.navbar a.navbar-brand {
    color: #fff;
    font-weight: 600;
}
    nav.navbar a.navbar-brand:hover,
    nav.navbar a.navbar-brand:focus {
        color: inherit;
    }


nav.navbar .navbar-toggle {
    background: #fff;
    color: #333;
    border: none;
    border-radius: 0;
}
    nav.navbar .navbar-toggle:hover,
    nav.navbar .navbar-toggle:focus {
        background: #fff;
        color: #333;
    }

nav.navbar .navbar-collapse {
    border: none;
}

nav.navbar ul.navbar-nav {
    border: 2px solid #fff;
}

nav.navbar ul.navbar-nav a {
color: #1e1d1f !important;
    font-family: 'Lato';
    text-transform: uppercase;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.3px;
}
    nav.navbar ul.navbar-nav a:hover,
    nav.navbar ul.navbar-nav a:focus {
        color: #333;
        background: #fff;
    }

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar {
    margin-bottom: 0;
}


/* Navbar Form */
nav.navbar form.navbar-form input {
    border-radius: 0 ;
    border-color: #6172b9;
    background: none;
    color: #fff;
    font-weight: 300;
}

nav.navbar form.navbar-form button {
    background: #6172b9;
    color: #fff;
    border-color: #6172b9;
    border-radius: 0;
    box-shadow: none !important;
    outline: none;
}
    nav.navbar form.navbar-form button:hover {
        background: #fff;
        color: #6172b9;
    }

/* Navbar Button */
nav.navbar button.navbar-btn {
    border-radius: 0;
    border-color: #6172b9;
    background: #6172b9;
    color: #fff;
}
    nav.navbar button.navbar-btn:hover {
        background: #fff;
        color: #6172b9;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="hero">
<div class="content">
<div class="container">

<div class="row light-logo"><img src="assets/images/logo-white.png">   

</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="row">
<h1 class="hero-italic">Demo Title</h1>
<h1 class="hero-regular">Description</h1>
<p class="lead light">Subtitle with text</p>
<a class="btn btn-danger" target="_self" href="#">View all services</a> <a class="btn btn-fill btn-light" target="_self" href="#">Start the conversation</a>
</div><!--row-hero-->    
</div><!-- col-7 -->
<div class="col-md-12 col-md-5"></div>
</div><!-- row -->
</div> <!-- container -->
</div> <!-- content -->
</section><!-- section -->    
    
<header class="site-header" role="banner">
        <nav class="navbar">
            <div class="container">
                <div class="navbar-header">
                </div>
                <div class="collapse navbar-collapse" id="exampleNavComponents">


                    <ul class="nav navbar-nav">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                    </ul>
                </div>
            </div>
        </nav>
</header>    

<section id="main">
<div class="container-fluid">
    <div class="content">
        <div class="row">
            <div class="col-md-4 text-center">
                <div class="col-case equal">
                    <h2>Lorem Ipsum</h2>
                    <p>Description.</p>  
                    <a href="" class="btn info">More</a>   
                </div>
            </div>
                        <div class="col-md-4 text-center">
                <div class="col-case equal">
                    <h2>Lorem Ipsum</h2>
                    <p>Description.</p>  
                    <a href="" class="btn info">More</a>   
                </div>
                                    <div class="col-md-4 text-center">
                <div class="col-case equal">
                    <h2>Lorem Ipsum</h2>
                    <p>Description.</p>  
                    <a href="" class="btn info">More</a>   
                </div>
        </div>
    </div>
</div>
</section>

<section> 
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</section>