XF 1.4 Navbar glitches upon scrolling down

[teerialegends]

Hello, I do not know if this is the actual right section to post this in. If it is not, please move it.

So as you can see on http://forums.teeria.net/ I've added a firefly background which requires JS/jQuery and I noticed that when you scroll down the Navbar glitches out/disappears. I know for a fact that it has to do with the JS/jQuery but I have no idea what is affecting the Navbar to fall apart.

Here is my code:

var WIDTH;
var HEIGHT;
var canvas;
var con;
var g;
var pxs = new Array();
var rint = 50;

$(document).ready(function(){
  WIDTH = window.outerWidth;
  HEIGHT = window.outerHeight;
    $('#container123').width(WIDTH).height(HEIGHT);
    canvas = document.getElementById('pixie');
    $(canvas).attr('width', WIDTH).attr('height',HEIGHT);
    con = canvas.getContext('2d');
    for(var i = 0; i < 50; i++) {
        pxs[i] = new Circle();
        pxs[i].reset();
    }
    setInterval(draw,rint);

});

function draw() {
    con.clearRect(0,0,WIDTH,HEIGHT);
    for(var i = 0; i < pxs.length; i++) {
        pxs[i].fade();
        pxs[i].move();
        pxs[i].draw();
    }
}

function Circle() {
    this.s = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true};

    this.reset = function() {
        this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef);
        this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef);
        this.r = ((this.s.rmax-1)*Math.random()) + 1;
        this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1);
        this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1);
        this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax);
        this.rt = Math.random()*this.hl;
        this.s.rt = Math.random()+1;
        this.stop = Math.random()*.2+.4;
        this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
        this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
    }

    this.fade = function() {
        this.rt += this.s.rt;
    }

    this.draw = function() {
        if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) this.s.rt = this.s.rt*-1;
        else if(this.rt >= this.hl) this.reset();
        var newo = 1-(this.rt/this.hl);
        con.beginPath();
        con.arc(this.x,this.y,this.r,0,Math.PI*2,true);
        con.closePath();
        var cr = this.r*newo;
        g = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr));
        g.addColorStop(0.0, 'rgba(238,180,28,'+newo+')');
        g.addColorStop(this.stop, 'rgba(238,180,28,'+(newo*.2)+')');
        g.addColorStop(1.0, 'rgba(238,180,28,0)');
        con.fillStyle = g;
        con.fill();
    }

    this.move = function() {
        this.x += (this.rt/this.hl)*this.dx;
        this.y += (this.rt/this.hl)*this.dy;
        if(this.x > WIDTH || this.x < 0) this.dx *= -1;
        if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
    }

    this.getX = function() { return this.x; }
    this.getY = function() { return this.y; }
}

I already changed the container name because I thought that would cause the problem but it did in fact not.

 

[teerialegends]

function draw() {
    con.clearRect(0,0,WIDTH,HEIGHT);
    for(var i = 0; i < pxs.length; i++) {
        pxs[i].fade();
        pxs[i].move();
        pxs[i].draw();
    }
}

con.clearRect(0,0,WIDTH,HEIGHT); seems to be causing the issue.

 

[teerialegends]

Okay so it has to do with the background positioning.. is there any way to fix that? It seems to bug with both relative,absolute and fixed..


EDIT: Took the background off for now, you can still find it @ http://codepen.io/andrewreifman/pen/vgGjb