CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapbootstrap-4
core114
core114

Reputation: 5325

bootstrap 4 - navbar brand logo not change in scroll down

I added bootstrap 4 and I created the navbar, it is working good, but i have some conflict I tried to change when the scroll down change the navbar logo, but its not working correctly, anyone know how to fix that issue.

This is my code:

$(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 1000) {
                    $('.navbar .navbar-brand img').attr('src','https://via.placeholder.com/150/FF00FF/808080?Text=newLogo');
                }
                if ($(this).scrollTop() < 1000) {
                    $('.navbar .navbar-brand img').attr('src','https://via.placeholder.com/150/0000FF/808080?Text=oldLogo');
                }
            })
        });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<header class="main_menu home_menu">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-12">
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" > <img src="https://via.placeholder.com/150/0000FF/808080?Text=oldLogo" style="width:50px;">   </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button></nav>
      </div></div></div></header>
      
      <section>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
  <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>  <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>  <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
  <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
  <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
  <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
      </section>

Upvotes: 0

Views: 927

Answers (1)

Mayank Patel
Mayank Patel

Reputation: 1571

Check out below fiddle. It is working fine. It is just that your image is getting hidden under scroll otherwise your image is getting changed.

Please note, for illustration purposes, I have fixed your navbar header.

Just use navbar navbar-expand-lg navbar-light fixed-top classes for your navbar and it should work as expected.

$(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 1000) {
                    $('.navbar .navbar-brand img').attr('src','https://via.placeholder.com/150/FF00FF/808080?Text=newLogo');
                }
                if ($(this).scrollTop() < 1000) {
                    $('.navbar .navbar-brand img').attr('src','https://via.placeholder.com/150/0000FF/808080?Text=oldLogo');
                }
            })
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<header class="main_menu home_menu">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-12">
        <nav class="navbar navbar-expand-lg navbar-light fixed-top">
                    <a class="navbar-brand" > <img src="https://via.placeholder.com/150/0000FF/808080?Text=oldLogo" style="width:50px;">   </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button></nav>
      </div></div></div></header>
      
      <section>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
         <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
         <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
         <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
         <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
         <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
         <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
        <div>Placeholder</div>
      </section>

Upvotes: 1

Related Questions