How to scroll elements on canvas in different states and in different containers and not move others

I generate panels dynamically and put them in other states in that way so in one state you have a list of panels on the left and one big panel on the right for example in one state and when you click on the list on the left (with small panels) that panels takes the places of th开发者_JAVA百科e big panel and the big one goes back in the place. So I have 50 panels on the left and i want to scroll them down but I don't want to big panel to go down with them I want it fixed.

enter code here

protected function canvas1_creationCompleteHandler(event:FlexEvent):void {

            blurEffect= new BlurEffect(myBlur,myUnBlur);

            listEventsResult.token=eventService.listEvent();
            blurEffect.initFilter(event);


            panels=generatePanels(panelNumber);
            var vBox:VGroup= new VGroup();


            states=statesList.toArray();

            trace("stavi sequence i sostojba e"+ states[0].toString());

            for(var i:int=0; i<panelNumber ;i++)        // get panel from list panels and set states
            {
                 addChild(panels.getItemAt(i) as Panel);    
                (states[i] as State).overrides=[ new SetProperty(panels.getItemAt(i),"x",110), new SetProperty(panels.getItemAt(i),"y",0),
                    new SetProperty(panels.getItemAt(i),"width",widthBigPanel), new SetProperty(panels.getItemAt(i),"height",heightBigPanel)
                    //,new AddChild(g2,(panels.getItemAt(k) as Panel))
                    //,new SetProperty(panels.getItemAt(i),"scaleZ",110)
                ];
                trace("vlegov override za new state");
                var yy:int=0;


                for(var k:int=0;k<panelNumber;k++)
                {
                    trace("menuvam state: yy = " + yy);
                    if(k!=i){
                        vBox.addChild(panels.getItemAt(k) as Panel);
                        (states[i] as State).overrides = (states[i] as State).overrides.concat([ new SetProperty(panels.getItemAt(k),"x",x), new SetProperty(panels.getItemAt(k),"y",yy),
                            new SetProperty(panels.getItemAt(k),"width",widthPanel), new SetProperty(panels.getItemAt(k),"height",heightPanel)
                        //,new AddChild(g1,(panels.getItemAt(k) as Panel))
                        ]);
                        yy+=110;
                    }
                }

                for(z=0; z<(states[i] as State).overrides.length; ++z){
                    var tempSetProperty:SetProperty= (states[i] as State).overrides[z] as SetProperty;
                    trace("\nname: " + tempSetProperty.name);
                    trace("target: " + tempSetProperty.target);
                    trace("value: " + tempSetProperty._value);
                }


                setCurrentState("state0");
                addChild(vBox);
            }

            //sequence.targets=panels.toArray();
            t1.targets=panels.toArray();

        }

You could do your regular scrolling, but add a vertical scroll bar listener, scroll="myScroll(event), that repositions the large panel as scrolling occurs (using something like the original x,y values of the panel and the verticalScrollPosition property).

Alternatively, you could add a second canvas on top of the first one, and sets its background to transparent. Place the large panel on the transparent canvas so it doesnt scroll (and put it back to the original canvas when scrolling completes if that suits).

Both of these are heavy(ish) on processing (especially the transparent canvas).