Sticky header in een modal window

[2020Media]

Ik maak gebruik van een full screen modal window (m.b.v. http://joaopereirawd.github.io/animatedModal.js/)
Nu wil ik binnen dit scherm mijn header / navigatie sticky maken, wanneer de gebruiker naar beneden scrolt dient het munu dus boven in het scherm te blijven staan.

In firefox kan ik dit mooi oplossen met position:sticky; maar chrome ondersteund deze functie nog niet.
Ik heb zelf geprobeert om gebruik te maken van een polyfill voor chrome (https://github.com/filamentgroup/fixed-sticky) maar dze werkt wel op een normale pagina maar niet in de modal window.
Position: fixed, of absolute werken niet omdat het om een modal window gaat.

De testpagina is te vinden op: www.2020media.nl/lew/test5
Zoals je kunt zien is de tekst "Issue #19, #20: Element has initial offset of 0. " op de hompagina sticky.
Als je op het eerste project klikt opent een modal window en is de tekst inneens niet meer sticky.

Het gaat dus om chrome, in firefox werkt alles naar behoren daar kun je ook zien hoe het zou moeten werken.

[FotW]

Waarom zouden position absolute of fixed niet werken? Een modal is niets anders dan een div met een (te) hoge z-index

[2020Media]

En toch wil het niet lukken ik heb:

code:

    position: absolute;
    z-index: 9999;

alsmede variaties met position: fixed; en display:block; gebrpobeerd maar ik kan er niet achter komen waarom het niet wil werken.

De code van het hele modal blok is als volgt:

HTML:

<div id="modal-01">

                  <div class="top fixedsticky">
                    Issue #19, #20: Element has initial offset of 0.
                  </div>

                  <div class="container">
                    <div class="modal-content">

                      <div class="subnav">
                        <h1>2020 Media</h1>
                        <h2>By UX designer / frontend developer Rakesh Chinnoe</h2>
                        <!--The class name has to match the name given on the ID -->
                            <div  id="btn-close-modal" class="close-modal-01">
                          </div>
                          <div  class="btn-live">
                          </div>
                        <!--
                        <img src="images/logo.png" width="275" height="35" alt="Logo" />
                        -->
                        <hr />
                      </div>

                      <div class="workdetail">
                        <img src="images/projects/vr-groot.jpg" alt="Project vr"  />
                           <img src="images/projects/vr-groot.jpg" alt="Project vr"  />
                      </div>
                  </div>
                </div>
              </div> <!-- Animated modal ======================================================================= -->

modal-01 wordt als volgt opgemaakt:

JavaScript:

ar settings = $.extend({
            modalTarget:'animatedModal',
            position:'fixed',
            width:'100%',
            height:'100%',
            top:'0px',
            left:'0px',
            zIndexIn: '9999',
            zIndexOut: '-9999',
            color: '#39BEB9',
            opacityIn:'1',
            opacityOut:'0',
            animatedIn:'zoomIn',
            animatedOut:'zoomOut',
            animationDuration:'.6s',
            overflow:'auto',

en .fixedsticky

Cascading Stylesheet:

position: fixed;
    z-index: 99999;
    /* display: block; */
 

Wat is zelf ook niet snap is dat dezelfde div op de homepage wel sticky is en in de modal window niet

[ Voor 85% gewijzigd door 2020Media op 19-10-2015 17:14 ]

[FotW]

Omdat je sticky een positie krijgt ten opzichte van de modal (althans bij fixed en absolute), als je je sticky element buiten de modal plaatst zal het wel werken omdat ie dan de positie ten opzichte van de body kan pakken.

[2020Media]

Als ik hem buiten de modal plaats komt hij of nooit meer boven de modal te staan (z) of is hij ook zichtbaar buiten de modal pagina, terwijl hij alleen zichtbaar moet zijn op de modal pagina.

Ik heb nu een lelijke oplossing bedacht:

JavaScript:

$('#project01').click(function() {
    $('#subnav').addClass('visiblenav);
});

$('#btn-close-modal').click(function() {
    $('#subnav').removeClass('visiblenav');
});

De div staan nu hidden op de homepagina en wordt visible als er op een modal window wordt geklikt. wanneer de modal wordt gesloten wordt de .visiblenav class weer verwijderd.
Kan waarchijnlijk makkelijker maar dit is het enige wat ik kan bedenken. behoorlijk omlsachtig als je bedenkt dat firefox gewoon position:sticky; pakt.