CODEWITHSUNDEEP
javascriptcss
Dipankar Das
Dipankar Das

Reputation: 131

How to add different logo when i scroll down?

I have made a page which has a transperant header and a logo in white color. But when i scroll down my logo isn't visible because of white body color. I want to add black logo when i scroll down. How to do it ?

This is my code. :

$(window).on('scroll', function () {
if ($(this).scrollTop()) {
    $('.navbar').addClass("shrink");
    //$('.navbar-brand  img').attr('src', 'images/logo.png');
}else{
    $('.navbar').removeClass("shrink");
    //$('.navbar-brand  img').attr('src', 'images/logo.png');
}
});

but its not working

Upvotes: 2

Views: 5704

Answers (4)

Ehsan
Ehsan

Reputation: 12959

Try This:

$(window).scroll(function(){
    if($(this).scrollTop()>70) {
        $('#header img').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/600px-Apple_logo_black.svg.png');
    }
    else {
        $('#header img').attr('src','https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png');
    }
})
body {
    height: 1500px;
}

#header {
    height: 70px;
    background-color: #ccc;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}  

#header img {
    width: 50px;
}  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="header">
 <img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png">   
</div>

Upvotes: 1

brk
brk

Reputation: 50291

scrollTop will return a value while this line if ($(this).scrollTop()) will look for a boolean value.

So test the value in the loop condition

if ($(this).scrollTop()===someNumber) {
//rest of code
}

Upvotes: 0

Vivek Saha
Vivek Saha

Reputation: 167

You need to add scroll amount. Replace your code with this one.

$(window).on('scroll', function () {
if ($(this).scrollTop() > 70) { // Set position from top
    $('.navbar').addClass("shrink");
    //$('.navbar-brand  img').attr('src', 'images/logo.png');
}else{
    $('.navbar').removeClass("shrink");
    //$('.navbar-brand  img').attr('src', 'images/logo.png');
}
});

Hope It works. Thanks !

Upvotes: 1

Narendra Solanki
Narendra Solanki

Reputation: 1202

Take a look on this, it will help you.

$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();

    if (scroll >= 500) {
      if(!logo.hasClass("sml-logo")) {
        logo.hide();
        logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
      }
    } else {
      if(!logo.hasClass("lrg-logo")) {
        logo.hide();
        logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
      }
    }

});
});
.wrapper {
  height: 2000px;
  position: relative;
  background: green;
}

header {
  position: fixed;
  width: 100%;
  height: 50px;
  background: grey;
}

.lrg-logo {
  width: 300px;
  height: 50px;
  text-align: center;
  background: red;
}

.sml-logo {
  width: 200px;
  height: 20px;
  text-align: center;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
  <div class="lrg-logo">Logo</div>
</header>
</div>

Upvotes: 0

Related Questions