Altijd zichtbare elementen opslaan/annuleren binnen DIV?

Ik geef DIV-elementen als rijen weer. De bewerkingssjabloon voor dit formulier is vrij lang. Ik heb een kleine knop voor opslaan en annuleren linksboven in de bewerkingssjabloon DIV. Ik zou graag zien dat de opdrachtknoppen zichtbaar zijn en naar beneden scrollen wanneer ze buiten het zichtbare gebied van de bewerkings-DIV worden geschoven.

Het geheel is verpakt in een element met vaste hoogte met overloop: automatisch.

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 OK.

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

2

2 antwoord

Dit zou het kunnen doen. (Hangt af van je andere code)

.save{
    position:fixed;
}

Example: http://jsfiddle.net/fJ55D/1/

0
toegevoegd
Bedankt. Dat werkte voor dat voorbeeld, maar ik vergat te vermelden dat dit hele ding in een DIV met vaste hoogte is. jsfiddle.net/fJ55D/3
toegevoegd de auteur Orange Kid, de bron

U kunt het bedrag van de pagina die wordt gescrolld controleren en een klasse toevoegen/verwijderen die het element in de viewport zal repareren:

$(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/

0
toegevoegd
@ Orkid Wat bedoel je met "uitbreekt?"
toegevoegd de auteur Jasper, de bron
Bedankt. De "save" -spanne breekt nog steeds hieronder, maar misschien kan ik vanaf hier gaan.
toegevoegd de auteur Orange Kid, de bron
Als u verder scrolt dan de bewerkingsrij, is "opslaan" nog steeds zichtbaar bovenop de andere alleen-lezen items. jsfiddle.net/fJ55D/6 (met extra rijen onderaan om te illustreren.)
toegevoegd de auteur Orange Kid, de bron