Hide div beim Scrollen nach unten

Question

Ich möchte nur ein Bild ausblenden, wenn Sie nach unten scrollen und ein anderes Bild anzeigen. Wenn Sie zum Anfang der Seite blättern, muss das erste Bild angezeigt werden und ein anderes Bild muss ausgeblendet werden.

Ich versuchte mit diesem Code.

//This is the image I just want to show at first 
<img src="images/logo-wh.png" alt="" class="logo-white"> 

//This is the image I just want to show when scroll down 
<img src="images/logo.png" alt="" class="logo-default"> 

.logo-default{ 
    display:none; 
} 

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

Aber es funktioniert nicht wie ich erwartet habe. Irgendwelche Vorschläge?

Answer 1

ändern, um ein bisschen die Show und verstecken in der if...else Aussage:

$(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>

Answer 2

CSS:

height: x; 
overflow: hidden; 

Answer 3

Vielleicht etwa 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>

Answer 4

Hier ist Arbeitsbeispiel, nur beide Elemente mit ausblenden verwendet zeigen Unterschiede, die Sie benötigt.

$(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>

Answer 5

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

löschen zweite img-Tag

Answer 6

Hier ist ein Beispielcode:

$(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">