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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid='wrapper'><imgsrc="http://www.alessandrobianchetti.com/uploads/1/8/5/3/18531856/1842659_orig.jpg"alt=""class="logo-white"><imgsrc="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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><imgsrc="http://lorempixel.com/400/200/sports/1/"alt=""class="logo-white"><imgsrc="http://lorempixel.com/400/200/sports/2/"alt=""class="logo-default"><divstyle="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; }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="logo-white"></div><divclass="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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><imgsrc="https://cdn.pixabay.com/photo/2015/02/07/22/31/golden-eagle-627943_960_720.jpg"alt=""class="logo-white"><imgsrc="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