Changing image logo on scroll

Question

I am trying to make an image change once you scroll to a certain point. I've tried the following but it changes right when you scroll.

    jQuery(function($) {
 $(window).scroll(function() {
   if($('.navbar').hasClass('navbar-brand')) {
     $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }else{
     $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }
 });
});

I tried to add the following code for it to know when to switch between images, but failed

    var wn = $(window).scrollTop();
    if(wn > 700){

Answer 1

$(function () { 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1000) { 
            $('.navbar .navbar-brand img').attr('src','http://placehold.it/220?text=Original+Logo!');
        }
        if ($(this).scrollTop() < 1000) { 
            $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
        }
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top" >  
<a class="navbar-brand first" data-toggle="modal" data-target="#myModal">Start </a>
  
  
  
  <a class="navbar navbar-brand first" data-toggle="modal" data-target="#myModal"><img src='http://placehold.it/120?text=Original+Logo!'></a>
  
  
  
  
  <a class="dropdown-toggle btn btn-primary btn-md btn-example dropdown-hover-toggle" data-toggle="dropdown"
>
</a>
  
<ul class="dropdown-content dropdown-menu dropdown-menu-right" role="menu" >								
		<li> <a href="#" title="I'm Serious"> Nothing to see here</a> </li>
	</ul>
</nav>

<div class="bbb aaa">
  
</div>

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="width:1500px;">

  <!-- Modal content-->
  <div class="modal-content">

    <div class="modal-header" style="background-color: #003399;">
      <button type="button" class="close" data-dismiss="modal" style="color: 
       #fff;">&times;</button>
      <h4 class="modal-title" style="color: #fff;">Upload New File</h4>
    </div>

    <div class="modal-body">
      <form class="form-horizontal" action="uploadfile.php" method="post" 
       name="addservice" enctype="multipart/form-data" align="center" 
       onsubmit="return validateForm()"> 
    
          <label for="filename" class="col-sm-2 control-label">File Name:
          </label>
          <div class="col-sm-4"><input type="text" class="form-control" 
             name="filename" id="filename" placeholder="Name of the file" 
             maxlength="55" tabindex="1" required></div>

          <label for="file" class="col-sm-2">File:</label>
          <div class="col-sm-4"><input type="file" maxlength="11" 
            name="file" id="file" class="form-control" tabindex="2" 
            required></div>
        

  
          <label for="filedesc" class="col-sm-2">File Description:</label>
          <div class="col-sm-4"><textarea class="form-control" rows="3" 
           name=" filedesc" id="filedesc" placeholder="(maximum of 75 
           characters)" style="resize: none;" maxlength="75" tabindex="3" 
           required></textarea></div>
     




        <div class="col-sm-4">
          <div class="form-group"><input class="btn btn-success btn-lg col-
          sm-4" name="submit" type="submit" value="Upload" tabindex="4">
            <input type="reset" class="btn btn-default btn-lg col-sm-4" 
            name="clear" value="Clear" tabindex="5">
          </div>
        </div>
      </form>
      <div>
    </div>
    </div> <!-- modal body -->

    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>

  </div>  <!-- modal content -->

</div> <!-- modal dialog -->
</div> 



<h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br>

<h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br>

That should do the trick. If you need to change it back make the same function but switch logic...

EDIT

So this was the first condition:

if ($(this).scrollTop() > 1000) { 
    $('.navbar .navbar-brand img').attr('src','http://placehold.it/220?text=Original+Logo!');
}

And now I added the second condition:

if ($(this).scrollTop() < 1000) { 
    $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
}

I changed two things:

1. the number in the link
2. > became <

So now the logic is: if scrolled is less than 1000px use the small image, and if more than 1000px use the big image.

Answer 2

    HTML
    ----------------------------------------
    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>


    <nav class="navbar navbar-expand-lg navbar-light bg-light cn-stick-nav">
    <div class="container">
      <a class="navbar-brand" href="index.html"><img src="images/logo/logo.png"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown2" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="cn-toggle"><i class="fas fa-bars"></i></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown2">
        <ul class="navbar-nav mr-auto">
         <!--extra menu space-->
        </ul>

        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">New Arrived</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="blog.html">Blog</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">Portfolio</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="contact-us.html">Contact Us</a>
          </li>


        </ul>
      </div>
      </div>
    </nav>

    ---------------------------------
    JAVA Script
    ---------------------------------
    $(window).scroll(function(){
        if($(this).scrollTop()>5){
            $(".cn-stick-nav").addClass("fixed-top navbar-dark bg-dark nav-bdr");
        }

        else{
            $(".cn-stick-nav").removeClass("fixed-top navbar-dark bg-dark nav-bdr");
        }
    })
    //
$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop()>5){
            $(".navbar .navbar-brand img").attr("src","images/logo/logo-white.png");
        }

        else{
            $(".navbar .navbar-brand img").attr("src","images/logo/logo.png");
        }
    })
})