Bootstrap Navbar Logo & Menu CSS classes change after scroll

How can I change Navbar-Brand Image and Menu class in Bootstrap 3 after scrolling?

My js skills are too low atm and I don’t know how to change after scroll my logo__web__light.png to logo__web__dark.png and navbar menu class also.

Thank you in advance!

  $(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.sticky-navbar').addClass('sticky');
    } else {
        $('.sticky-navbar').removeClass('sticky');
    }
});
.sticky-navbar {
    background-color: rgba(0, 0, 0, 0);
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
    height: 60px;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
    background-color: rgba(0, 0, 0, 0.46);
    height: 105px;
    transition: background-color .5s ease 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">                     
<body>   	

<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
  <div class="container-fluid custom-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <i class="fa fa-bars" aria-hidden="true"></i>
    
  </button>
      <a class="navbar-brand" target="_blank" rel="nofollow" href="#"><img src="assets/images/logo__web__light.png" alt=""></a>
    </div>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="nav navbar-nav pull-right custom-pull">
        <li class="active"><a target="_blank" rel="nofollow" href="#">Home</a></li>
        <li><a target="_blank" rel="nofollow" href="#1">Work</a></li>
        <li><a target="_blank" rel="nofollow" href="#2">Services</a></li> 
        <li><a target="_blank" rel="nofollow" href="#3">Contact Us</a></li> 
      </ul>
    </div>
  </div>
</div>

<section class="demo">
    <div class="container">
        <div class="row">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.

Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.

Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.

In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.

Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.

Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
            </div>
        </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>



You can add second logo which should appear when navbar have .sticky class and hide/show images according to that class

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.sticky-navbar').addClass('sticky');
    } else {
        $('.sticky-navbar').removeClass('sticky');
    }
});
.sticky-navbar {
    background-color: rgba(0, 0, 0, 0);
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
    height: 60px;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
    background-color: rgba(0, 0, 0, 0.46);
    height: 105px;
    transition: background-color .5s ease 0s;
}

.sticky-navbar .sticky-logo,
.sticky-navbar.sticky .main-logo
{
  display: none;
}
.sticky-navbar.sticky .sticky-logo{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">                     
<body>   	

<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
  <div class="container-fluid custom-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <i class="fa fa-bars" aria-hidden="true"></i>
    
  </button>
      <a class="navbar-brand main-logo" target="_blank" rel="nofollow" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 1</a>
      <a class="navbar-brand sticky-logo" target="_blank" rel="nofollow" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 2</a>
    </div>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="nav navbar-nav pull-right custom-pull">
        <li class="active"><a target="_blank" rel="nofollow" href="#">Home</a></li>
        <li><a target="_blank" rel="nofollow" href="#1">Work</a></li>
        <li><a target="_blank" rel="nofollow" href="#2">Services</a></li> 
        <li><a target="_blank" rel="nofollow" href="#3">Contact Us</a></li> 
      </ul>
    </div>
  </div>
</div>

<section class="demo">
    <div class="container">
        <div class="row">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.

Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.

Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.

In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.

Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.

Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
            </div>
        </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

Because the scroll event fires more time you can change your code to:

$(window).scroll(function() {
    var scrolltop = $(this).scrollTop();
    var sticky = $('.sticky-navbar.sticky').length;
    if (scrolltop > 50 && sticky == 0) {
        $('.sticky-navbar').addClass('sticky')
                .find('.navbar-brand img').attr('src', 'logo__web__dark.png');
        return;
    }
    if (scrolltop <= 50 && sticky != 0) {
        $('.sticky-navbar').removeClass('sticky')
                .find('.navbar-brand img').attr('src', 'assets/images/logo__web__light.png');
    }
});

In this way you will toggle the class and image source only one time per condition:

scrolltop > 50