We are doing some work at the moment that involves taking some paper based forms and making them into APEX web pages.

Some of these web forms are turning out to be pretty long and one of the issues that has been raised by users is the inconvenience of scrolling all the way up to the top to get to the one set of page buttons.

top of page

There were a few ideas for a solution bandied about, but we have settled on making the button region undock and stick to the top of the page as the top of the viewport hits the region when scrolling. The region returns to normal once the page gets scrolled up past the original region position. Basically, the buttons are always available regardless of scroll height.

floaty_buttons

The key thing here is a seemless user experience. The user should barely notice that the button region follows them down the page. It should be unobtrusive, but they should know that it is always available.

Click me to see a working example

So, how is it done?

With a little CSS.

.fixedRegion {
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
   z-index: 100;
}

and some JavaScript.

function floatButtonBar()
{ 
  // Selector based on Static ID
  var buttonBar = $('#floatingButtonBar');
  if( buttonBar.length > 0 )
  { 
      var regPosition = buttonBar.position().top;
      $(window).bind('scroll', function () 
      {
        if ($(window).scrollTop() > regPosition) 
        { 
          buttonBar.addClass('fixedRegion');
        } else {
          buttonBar.removeClass('fixedRegion');
        }
      });
    }
}

and the addition of a Static ID against the region in APEX.

static id

The JavaScript and CSS should be at the application level, allowing you to simply add the static ID to any page in order to enable floatyness.