Question

When viewing large, long cases it can be annoying to have to scroll all the way to the top or bottom of the page to get to the action bar (i.e., the "Edit, Reply, Resolve" button bar).

Similarly, sometimes when I'm composing a case edit or email, it'd be really useful to be able to scroll the case events independently from the editor so I can review previous case events without hiding the editor.

Answer 1

Here's a BugMonkey customization that makes the case action bar stick to the top of the screen when you scroll down the page (in view mode), and does the same for the editor (in edit mode):

name:          Floating Bug Controls++
description:   Makes the bug controls stick to the top of the page when scrolling (including the editor)
author:        Kevin Gessner & Dane Bertram
version:       1.2.0.0

js:

$(function() {
  if (!$('#bugviewContainer').length) return;

  $('#bugviewActionButtonsTop').addClass('bugviewWidth');

  var inEditMode = function() { return $('#bugviewContainerEdit .editor').length > 0; };
  var getDelta = function(sSelector) { return $(window).scrollTop() - $(sSelector).offset().top; };
  var floatBugControls = function() {

    var floatActionBar = !inEditMode() && getDelta('#bugviewContainer') > 0;
    $('#bugviewActionButtonsTop').toggleClass('floating', floatActionBar);
    $('#bugviewContainerTop').css('margin-top', floatActionBar ? $('#bugviewActionButtonsTop').outerHeight() : 0);

    var floatEditor = inEditMode() && getDelta('#bugviewContainerSide') > 0;
    var firstBugEvent = $('#BugEvents').find('.pseudobugevent, .bugevent').first();
    $('#bugviewContainerEdit').toggleClass('floating', floatEditor);

    if (floatEditor) {
      $('#bugviewContainerEdit').width($('#BugEvents .bugevent').outerWidth());
      firstBugEvent.css('margin-top', $('#bugviewContainerEdit').outerHeight());
    } else {
      firstBugEvent.css('margin-top', 0);
    }
  };

  $(window).scroll(floatBugControls);
  $(window).bind('BugViewChange', floatBugControls);
  floatBugControls();
});


css:

#bugviewActionButtonsTop, #bugviewContainerEdit {
  z-index: 10;
}
#bugviewActionButtonsTop.floating, #bugviewContainerEdit.floating {
  position: fixed;
  top: 0;
}
#bugviewActionButtonsTop.floating {
  border-bottom: solid 1px #C7C7C7;
  box-shadow: #c7c7c7 0 1px 5px;
}
/* play nicely with the Floating Top Nav customization: http://fogbugz.stackexchange.com/questions/9921/9923 */
.floatingTopNav #bugviewActionButtonsTop.floating, .floatingTopNav #bugviewContainerEdit.floating {
  top: 63px;
}