Soucis avec Matchmedia

bonjour à tous,

je fais un site dans lequel je souhaiterais que certains fichiers javascript (un destiné à faire apparaitre des statistiques et deux autres destinés à rendre fixe un élément du menu, je précise car c'est important pour la suite) ne soient charger que pour une taille d'écran supérieure à 600px.
j'ai lu avec intérêt cet article qui traite du sujet :

http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

malheureusement je ne connais pas grand chose au javascript et j'ai quelques soucis. actuellement mon code est le suivant et tout fonctionne bien

/*statistiques*/
<script src="http://i0.poll.fm/js/rating/rating.js"></script>

/*élément fixe*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="prk/jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$("#up1").sticky({topSpacing:0});
});
</script>

j'ai voulu utiliser matchmedia et j'ai écris :

<script>
if(window.matchMedia("(min-width:600px)").matches) {

var script1 = document.createElement('script');
script1.type='text/javascript';
script1.src = 'http://i0.poll.fm/js/rating/rating.js';

var script2 = document.createElement('script');
script2.type='text/javascript';
script2.src = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';

var script3 = document.createElement('script');
script3.type='text/javascript';
script3.src = 'prk/jquery.sticky.js';

document.getElementsByTagName('body')[0].appendChild(script1);
document.getElementsByTagName('body')[0].appendChild(script2);
document.getElementsByTagName('body')[0].appendChild(script3);
} 
</script>
<script>
$(document).ready(function(){
$("#up1").sticky({topSpacing:0});
});
</script>

et là les statistiques apparaissent bien, mais l'élément censé devenir fixe ne l'est pas, donc il y a un soucis avec //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js et jquery.sticky.js

merci d'avance si vous pouvez m'aider car je n'aimerais vraiment pas charger ces deux fichiers sur mobiles.

j'aurais une deuxième question dans le cas ou vous arriviez à résoudre mon premier problème :

toujours sur la page http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html il est question d'un code pour qu'en cas de redimensionement du viewport, ce redimensionnement soit pris en compte :

// Fonction exécutée au redimensionnement
function redimensionnement() {
  var result = document.getElementById('result');
  if("matchMedia" in window) { // Détection
    if(window.matchMedia("(min-width:600px)").matches) {
      // Il y a de la place
    } else {
      // Il y en a moins...
    }
  }
}
// On lie l'événement resize à la fonction
window.addEventListener('resize', redimensionnement, false);

mais je ne comprends pas ou se place ce code par rapport au code précédent.

merci d'avance pour vos réponses.
Modifié par tresor84 (05 Jan 2015 - 15:58)