Hide Div While Scrolling Down

I just want to hide an image when scroll down and show another image. When scroll to top of the page, first image needs to show and other image needs to be hide. I tried with this

Solution 1:

Modify a bit the show and hide inside the if...else statement:

$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.logo-white').hide();
    $('.logo-default').show();
  } else {
    $('.logo-white').show();
    $('.logo-default').hide();
  }
});

.logo-default {
  display: none;
}
#wrapper{
  height: 1000px;
  background: #adadad;
}

img{
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
    <img src="http://www.alessandrobianchetti.com/uploads/1/8/5/3/18531856/1842659_orig.jpg" alt="" class="logo-white"> 
    <img src="http://www.pietrarosa.it/wp-content/uploads/2015/01/paesaggi-1.jpg" alt="" class="logo-default">
</div>

Solution 2:

Maybe like so:

$(window).scroll(function() {
    if ($(this).scrollTop() <= 0) {
        $('.logo-default').hide();
        $('.logo-white').show();
    } else {
        $('.logo-default').show();
        $('.logo-white').hide();
    }
 });

.logo-white,
.logo-default {
    position: fixed;
    top: 0px;
}

.logo-default{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://lorempixel.com/400/200/sports/1/" alt="" class="logo-white"> 

<img src="http://lorempixel.com/400/200/sports/2/" alt="" class="logo-default">

<div style="height: 2000px;width: 10px;background-color: orange;"></div>

Solution 3:

Here's working example, just used both elements with hide show differences you needed.

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        $('.logo-white').hide();
        $('.logo-default').show();
    } else {
        $('.logo-default').hide();
        $('.logo-white').show();
    }
 });
$(window).trigger('scroll');

.logo-white, .logo-default {
  width: 100px;
  height: 100px; 
  background: #000;
  position: relative;
}

.logo-default { background: #d20000; }

body { height: 500px; overflow: scroll; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-white"></div>

<div class="logo-default"></div>

Solution 4:

Here is a sample code :

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        $('.logo-white').hide();
         $('.logo-default').show();
    } else {
        $('.logo-default').hide();
        $('.logo-white').show();
    }
 });

.logo-default {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://cdn.pixabay.com/photo/2015/02/07/22/31/golden-eagle-627943_960_720.jpg" alt="" class="logo-white">

<img src="https://cdn.pixabay.com/photo/2014/08/12/17/13/white-tailed-eagle-416795_960_720.jpg" alt="" class="logo-default">

Solution 5:

$("window ").scroll(function(){
if($(window).scrollTop()>0){
$(".logo-white").attr("src","images/logo-wh.png");
}
else{
$(".logo-white").attr("src","images/logo.png");
}
});

Delete the second img tag