Hide Movieclip from HTML5 Canvas on Page Scroll

[MushroomInternet]

Hi,

I have a HTML5 canvas animation and I would like to hide some of the movieclips when a user scrolls form the top of the web page that it is featured on. These movieclips are images that have a fade in/fade out effect and will scroll to an ID anchor when clicked. I would like these movieclips to only be shown when a user is at the top of the page but I can't seem to get this working. I have tried using an IF statement to check whether a user is at the top of the page and if they aren't then remove the mouseover, mouseout and click event listeners but this didn't seem to work. Is this possible to do? If so, how would I implement it?

The following code is what I am using to create the hyperlinked image movieclips (7 in total with different instance names) for reference:

function scrollToId(id) {

    var duration = 1000;

    var ease = createjs.Ease.cubicOut;

    var vscroll = document.getElementById(id).getBoundingClientRect().top;

    createjs.Tween.get(document.documentElement).to({scrollTop:vscroll}, duration, ease);

    createjs.Tween.get(document.body).to({scrollTop:vscroll}, duration, ease);

}

this.bus_cafe.cursor = "pointer";

this.bus_cafe.addEventListener("mouseover", BusCafe_MouseOverHandler);

this.bus_cafe.addEventListener("click", BusCafeAnchor);

this.bus_cafe.addEventListener("mouseout", BusCafe_MouseOutHandler);

function BusCafe_MouseOverHandler(evt) {

    createjs.Tween.get(evt.currentTarget.pin_bus_cafe, {override:true}).to({alpha:1}, 500);

}

function BusCafeAnchor() {

  scrollToId("bus-cafe");

}

function BusCafe_MouseOutHandler(evt) {

    createjs.Tween.get(evt.currentTarget.pin_bus_cafe, {override:true}).to({alpha:0.01}, 500);

}

Kind regards,

Peter

[kglad]

where's your if-statement?

is it in a window.onscroll function?

[MushroomInternet]

Hi Kglad,

The IF statement I am using is the following:

     if(window.pageYOffset > 0) {

          this.bus_cafe.removeEventListener("mouseover", BusCafe_MouseOverHandler);

          this.bus_cafe.removeEventListener("click", BusCafeAnchor);

          this.bus_cafe.removeEventListener("mouseout", BusCafe_MouseOutHandler);

     }

Kind regards,

Peter

[kglad]

try:

window.onscroll = function (e) { 

if(document.getElementById('canvas').getBoundingClientRect().top<-10){  // or pick another non-positive number

// remove your listeners

}

}