Wie Bild in Bootstrap navbar-Marke auf Bildlauf mit jQuery ersetzen?

Question

Im Grunde ist mein Problem, dass ich die Bilddatei der Navbar-Marke in meiner Bootstrap-Navigation zu einer anderen ändern möchte, sobald Sie durch die Website scrollen. Die Navigationsleiste ist transparent, wenn sich die Website oben auf der Seite befindet. Sobald Sie jedoch mit dem Bildlauf beginnen, wird der Navigationshintergrund weiß. Ich möchte, dass sich das Bild auf der Navbar-Marke auch in ein anderes farbiges ändert, das ich habe, damit es sichtbar bleibt, sobald sich der Navigationshintergrund ändert.

Hat jemand ein paar Ideen? Hier ist der HTML- und aktuelle jQuery-Markup, den ich habe.

<div class="container"> 
      <!-- Navbar Header --> 
      <div class="navbar-header"> 
       <!-- Collapse Toggle --> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <!-- /.collape-toggle --> 

       <!-- Navbar Brand --> 
       <a href="#" class="navbar-brand"><img src="img/blockins-logo.png" alt="Logo" draggable="false"></a> 
       <!-- /.navbar-brand --> 
      </div> 
      <!-- /.navbar-header --> 

      <!-- Navbar Menu --> 
      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <!-- Menu --> 
       <ul class="nav navbar-nav justified"> 
        <li role="presentation"><a href="#page-top">Welcome</a></li> 
        <li role="presentation"><a href="#">Our Story</a></li> 
        <li role="presentation"><a href="#">Services</a></li> 
        <li role="presentation"><a href="#">Programs</a></li> 
        <li role="presentation"><a href="#">Contact</a></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li role="presentation"> 
         <form class="navbar-form"> 
          <a href="#" class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i>Career Opportunities</a> 
         </form> 
        </li> 
       </ul> 
       <!-- /.menu --> 
      </div> 
      <!-- /.navbar-menu --> 
     </div> 
    </nav> 
$(document).ready(function() { 
// Navigation color change 
$(window).scroll(function() { 
    if ($(document).scrollTop() < 50) { 
     $('nav').addClass('transparent'); 
    } else { 
     $('nav').removeClass('transparent').css('color: black'); 
     $('') 
    } 
}); 

});

Answer 1

sollten Sie imgsrc mit Jquery ändern können.

$(document).ready(function() { 
     // Navigation color change 
     $(window).scroll(function() { 
     var nav_img = $('.navbar-brand img'); 
     if ($(document).scrollTop() < 50) { 
      $('nav').addClass('transparent'); 
      nav_img.attr("src","first.png"); 
     } else { 
      $('nav').removeClass('transparent').css('color: black'); 
      nav_img.attr("src","second.png"); 
     } 
     }); 
    }); 

Answer 2

könnten Sie schalten einfach die img src wie folgt aus:

$(document).ready(function() { 
    var image1 = 'img/blockins-logo.png'; 
    var image2 = 'img/blockins-logo2.png'; 
    $(window).scroll(function() { 
    if ($(document).scrollTop() < 50) { 
     $('nav').addClass('transparent'); 
     $('.navbar-brand img').attr('src',image1); 
    } else { 
     $('nav').removeClass('transparent').css('color: black'); 
     $('.navbar-brand img').attr('src',image2); 
    } 
    }); 
}); 

Beachten Sie, dass es vielleicht das Gefühl, da das Bild nur lädt, wenn Sie nach unten scrollen werden.

eine weitere Option, die ich denken kann ist zwei html zu wechseln ‚.navbar-Marke‘ wie folgt aus:

<!-- Navbar Brand --> 
<a href="#" class="navbar-brand image1"><img src="img/blockins-logo.png" alt="Logo"></a> 
<a href="#" class="navbar-brand image2" style="display:none;"><img src="img/blockins-logo2.png" alt="Logo"></a> 
<!-- /.navbar-brand --> 
<script> 
$(document).ready(function() { 
    $(window).scroll(function() { 
    if ($(document).scrollTop() < 50) { 
     $('nav').addClass('transparent'); 
     $('.image1').show(); 
     $('.image2').hide(); 
    } else { 
     $('nav').removeClass('transparent').css('color: black'); 
     $('.image2').show(); 
     $('.image1').hide(); 
    } 
    }); 
}); 
</script> 

Answer 3

Auch stellen Sie bitte sicher sind Ihre divs richtig verschachtelt. In Ihrer aktuellen Struktur wird Ihr Nav-Tag nicht am Anfang erwähnt, aber am Ende geschlossen.

$(window).scroll(function() { 
      if ($(window).scrollTop() < 50) { 
       $('nav').addClass('transparent'); 
       $('.brandLogo img').attr("src","img/blockins-logo.png"); 
      } else { 
       $('nav').removeClass('transparent').css('color: black'); 
       $('.brandLogo img').attr("src","img2"); 
      } 
     });