Question

I’m rendering DIV elements as rows. The edit template for this form is quite long. I have a small save and cancel button on the top left of the edit template DIV. I would like the command buttons to be visible and scroll down when they are scrolled outside of the visible region of the edit DIV.

The whole thing is wrapped in a fixed-height element with overflow: auto.

Hopefully this makes sense. I’ve thrown together a Fiddle to help illustrate what I’m talking about. http://jsfiddle.net/fJ55D/3/

jQuery is A-OK.

EDIT: A twist! My grid is in another element. I didn’t think it would cause problems but it may be the problem.

Answer 1

You can monitor the amount of the page that is being scrolled and add/remove a class that will fix the element to the viewport:

$(window).on('scroll', function () {
    var $save = $('.save'),
        off   = $save.attr('data-offset') || $save.offset().top;

    if ($(this).scrollTop() >= off) {
        $save.not('.fixed').attr('data-offset', $save.offset().top).addClass('fixed');
    } else {
        $save.filter('.fixed').removeClass('fixed');
    }
});

Here is a jsfiddle: http://jsfiddle.net/fJ55D/4/

Here is a jsfiddle forked off of your “fixed-height-scrolling-div” example: http://jsfiddle.net/fJ55D/5/