Always on top action bar

[Mistergos]

Hi there

I develop a game with a huge board. I added left and right button to scroll left and right using the scrollmap component provided by BGA.
User can scroll normally up and down using mouse or usual slide move (no overriding).

Everything works fine. No problem.

All the user input is hold in a panel on top of the screen (see attachment).

Capture.JPG (83.09 KiB) Viewed 908 times

My question is, how can i make it always on top like the main title bar?
Do i have to insert my div directly to main title bar or is there a proper way?
What i would like to do is basically merge the 2 buttons bar (my own and main title).

Thanks for your help

[Victoria_La]

There is layout option for that
https://stackoverflow.com/questions/121 ... crolled-to

[DoctorPelusa]

Not sure if that would work for you, but maybe CSS sticky property can do the trick: https://www.w3schools.com/howto/howto_c ... lement.asp

[Snapper67]

Look at position: fixed, or position:sticky

[Mistergos]

Thanks for all your replies.
Position fixed is indeed the way to go.
I hooked my div on page-title and move as it goes. It works well but assumed that there is #page-title and #after-page-title. So my question is more is there a better way or ican assume these 2 elements will always be there.

For those intersted, here is my code. It is working assuming #page-title and #after-page-title are always there.

In js setup

Code: Select all

            dojo.connect(window, 'onscroll', this, 'fixDiceBar');
            dojo.connect(window, 'onresize', this, 'fixDiceBar');
            this.fixDiceBar(null);
  

later in js

Code: Select all

        
        fixDiceBar : function(event)
        {
            var scrollTop = dojo._docScroll().y;
      	  var el = dojo.query('.fixedElement')[0];
      	  var afterPageTitle = dojo.query('#after-page-title')[0];
    	  el.style.width = dojo.query('#page-title')[0].style.width;
        	  if(afterPageTitle.style.height!="0px" && (el.style.position != 'fixed' || el.style.top == '0px' || el.style.top == '' ))
        		  {
      		  	el.style.position = 'fixed';      		  	
    		  	el.style.top = dojo.query('#after-page-title')[0].style.height;
        		  }
        	  
        	  if((afterPageTitle.style.height=="0px" || afterPageTitle.style.height=='') && el.style.position == 'fixed')
        		  {
      		  		el.style.position = 'static';
        		  	el.style.top = "0px";            		  
        		  }
       };
        

And finally the css

Code: Select all

<div  class="whiteblock fixedElement">
</div>