Problème parallax

Bonjour,

Voila je rencontre un petit problème avec mon code.
Je recherche a mettre en place un effet de parallax sur une page de mon site en développement. Je voudrais supperposer 2 backgrounds et en faire bouger uniquement 1 lorsque ma souris bouge.
J'ai alors recherché des exemples/tutoriels et je suis tombé sur celui-ci.
Je l'ai donc adapté, et l'effet fonctionne, or je ne peux plus scroller sur ma page.... Je cherche depuis un bon moment mais je ne trouve pas la solution....

Voici mon code raccourci acutuel :

<section class="tournees">
    <div id="parallax">
    .
    .
    .
    </div>
</section>

CSS :

.tournees
{
    width: 100%;
    height: 100%;
    background-image: url("../img/fondtournee.jpg");
    background-size: 100% auto; 
    background-repeat: no-repeat;
    position: fixed;
}

#parallax
{
  background-image: url("../img/confettis.png");
  position:fixed ;
  top:0;
  width:100%;
  z-index:0;
  height:100%;
  background-size: calc(100% + 50px);
}

Script :

$(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#parallax").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          $('#parallax').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});

Je précise que si je ne mets pas positions:fixed sur ma section, le background ne s'affiche plus.

Si vous avez des idées je suis vraiment preneur !!

Merci d'avance à tous :)