Changer l'image sur le défilement en utilisant le Javascript

Je travaille sur un site Wordpress et j'essaye de changer le logo fixe quand il défile. Ainsi, lorsque vous chargez la page, c'est un logo (logo500x398_trans.png) et lorsque vous faites défiler jusqu'à un certain point, il change à l'autre (logo500x398_trans2.png). Voici le javascript que j'ai jusqu'à présent:Changer l'image sur le défilement en utilisant le Javascript

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
var scrolling = jQuery(window).scrollTop(); 
if (scrolling > 10) { 
    jQuery("body").addClass("fixed-header"); 
    } 
else { 
    jQuery("body").removeClass("fixed-header"); 
    } 

jQuery(window).scroll(function() { 
    var scrolling = jQuery(window).scrollTop(); 
    if (scrolling > 10) { 
    jQuery("body").addClass("fixed-header"); 
    newImageURL = "logo500x398_trans2.png"; 
    } 
else { 
    jQuery("body").removeClass("fixed-header"); 
    newImageURL = "logo500x398_trans.png"; 
    } 
}); 
}); 

</script>

Source

2016-12-23 user3583313

Sans voir le code HTML que nous ne pouvons pas aider. Veuillez reproduire tout votre code sur un JSFiddle. –

Désolé! voici c'est: https://jsfiddle.net/8zq5ksLp/#&togetherjs=bDNv7eLco3 – user3583313

Il ya une solution de vanilla js, j'espère que cela fonctionne pour vous http://jsbin.com/jezoyajeyi/edit?html,js,output –

Regardé votre JSFiddle et trouvé comment vous étiez en train de styliser l'élément avec votre logo. Voici une solution CSS qui ne nécessite pas d'ajouter plus de JavaScript.

Ce code est dans votre <head>:

<style type="text/css"> 
    .header-image .site-title > a { 
    background: url(http://209.35.52.135/~thtroofing/wp-content/uploads/2016/12/logo500x398_trans.png) no-repeat !important; 
    } 
</style>

Ajouter une règle pour changer l'image pour .fixed-header comme ceci:

<style type="text/css"> 
    .header-image .site-title > a { 
    background: url(http://209.35.52.135/~thtroofing/wp-content/uploads/2016/12/logo500x398_trans.png) no-repeat !important; 
    } 
    .header-image.fixed-header .site-title > a { 
    background-image: url(http://209.35.52.135/~thtroofing/wp-content/uploads/2016/12/logo500x398_trans2.png) !important; 
    } 
</style>

Source

2016-12-23 17:20:50

vous demande toujours d'ajouter une classe à l'élément avec javascript. –

@MiguelCabrera J'ai dit qu'il ne l'oblige pas à ajouter du JavaScript. Il utilise la classe que son JS est déjà en train d'ajouter. –

Vous avez dit une solution CSS pure. Ce n'est évidemment pas une solution css pure. Sans Javascript ça ne marcherait pas. –

Je voudrais créer deux classes distinctes pour css chaque image, puis bascule à différents les points. Gardez aussi à l'esprit que le scrolltop est en pixels, donc 10 pixels sembleront ne pas défiler du tout.

.imgclass1 { 
    background-image: url("1.jpg"); 
} 
.imgclass2 { 
    background-image: url("2.jpg"); 
}

puis de basculer les classes comme tel.

$(window).scroll(function() { 
    var scrolling = $(window).scrollTop(); 
    if (scrolling > 10) { 
     $("body").addClass("imgclass1"); 
     $("body").removeClass("imgclass2"); 
    } else { 
     $("body").removeClass("imgclass1"); 
     $("body").addClass("imgclass2"); 
}

Source

2016-12-23 17:14:30

Changer l'image sur le défilement en utilisant le Javascript

Répondre

Questions connexes