Wie füge ich ein anderes Logo hinzu, wenn ich runterscrolle?

Ich habe eine Seite gemacht, die einen transparenten Header und ein Logo in weißer Farbe hat. Aber wenn ich nach unten scrolle, ist mein Logo wegen der weißen Körperfarbe nicht sichtbar. Ich möchte ein schwarzes Logo hinzufügen, wenn ich nach unten scrolle. Wie es geht ?Wie füge ich ein anderes Logo hinzu, wenn ich runterscrolle?

Dies ist mein 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'); 
} 
});

aber seine Arbeit nicht

Quelle

2017-06-10 Dipankar Das

Sie müssen scroll Menge hinzuzufügen. Ersetzen Sie Ihren Code durch diesen.

$(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'); 
} 
});

hoffe es funktioniert. Vielen Dank !

Quelle

2017-06-10 08:37:10

Dank Bro Seine Arbeit. :) und vergessen Sie nicht, die Kommentarzeilen zu entfernen –

My Pleasure :) @DipankarDas –

Es gibt ein Problem mit dieser Lösung. Das Ereignis 'scroll' wird mit jeder Scroll-Bewegung auf der Seite ausgelöst. Wenn Sie von 'scrollTop = 90' nach' scrollTop = 120' wechseln, wird Ihre Bedingung erfüllt und der Code für die img-Ersetzung wird ausgeführt, obwohl er nicht ausgeführt werden sollte, da das Logo bereits geändert wurde. Sie müssen ein Steuerelement hinzufügen, um Änderungen nur dann zu erkennen, wenn der Wert von < 70 to > 70 oder andersherum aorund geht. –

auf das Werfen Sie einen Blick, es wird Ihnen helfen.

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

Quelle

2017-06-10 08:37:02

scrollTop wird einen Wert zurückgeben, während diese Zeile if ($(this).scrollTop()) nach einem booleschen Wert sucht.

testen So den Wert in der Schleifenbedingung

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

Quelle

2017-06-10 08:38:50 brk

Was passiert, wenn '$ (this) .scrollTop()' niemals den Wert 'someNumber' erhält? Beim Scrollen mit einem mouseWheel springt der Wert von 'scrollTop' um ungefähr 25 Einheiten, so dass die Bedingung möglicherweise nie erfüllt wird, selbst wenn der Benutzer tatsächlich unterhalb des Punkts gescrollt hat, an dem OP das Logo geändert haben möchte. –

Dieses Versuchen:

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

Quelle

2017-06-10 09:24:50 Ehsan

Wie füge ich ein anderes Logo hinzu, wenn ich runterscrolle?

Antwort

Verwandte Themen