me pregunto si alguien ha encontrado una solución para esto?

estoy buscando una solución para añadir un elemento a la parte superior de un desplazamiento de contenedores

HTML:

<div class="container">
  <div class="header">title</div>
  <div class="element">......</div>
  ... (about 10-20 elements) ...
  <div class="element">......</div> 
</div>

todos los «elementos» han position:relative,

el contenedor tiene el siguiente CSS:

.container {
  position:relative;
  width:200px;
  height:400px;
  overflow-y:scroll;
}

quiero el encabezado para permanecer en la parte superior del contenedor, independientemente de su desplazamiento y la posición de los elementos de desplazamiento debajo.

el CSS hasta ahora:

.header {
  position:absolute; /* scrolling out of view :-( */
  z-index:2;
  background-color:#fff;
}
.element{
  position: relative;
}

todos los elementos son elementos de bloque, y no puedo mover el encabezado de la parte exterior del contenedor.
jquery no es una opción en este momento.

  • Usted puede hacer esto con jquery. ruturaj.net/automatic-header-stick-to-scroll-with-jquery
  • Si el contenedor no estaba en posición relativa, el encabezado sería en la parte superior de la misma cuando la posición absoluta. Podría su encabezado ser un precedente hermano del contenedor (bueno, «el contenedor» ahora sería el «contenido» o algo así) o sus elementos tienen su propio contenedor y no position: relative en el contenedor?
  • posición: fijo no respeta posición relativa. Se fija realtively para el documento en todo momento.
  • No hay necesidad de fixed si he entendido OP correctamente pero absolute
  • jQuery no es una opción … y como se dijo antes, no hay ninguna posibilidad de cambiar la estructura. posición:fijo se fija a la ventana, donde position:absolute significa que el encabezado de desplazamiento fuera de la vista si el contenido es mayor que el de los contenedores de altura.
  • lo que yo necesito, es que el encabezado de estancias (visible) en la parte superior del contenedor, no importa si el contenido es 900px de alta y se desplazan hacia abajo. en el momento en que se desplaza con el resto de los contenidos y esté fuera de la vista si el contenedor se desplaza hacia abajo.

InformationsquelleAutor Siggi Gross | 2012-06-29

4 Comentarios

  1. 21

    Creo que la solución pase con position:sticky. Parece como position:fixed pero respeta la posición relativa de sus padres.

    Por desgracia, esta es una característica experimental, y sólo se admite en Cromo. Usted puede ver más detalles en esta página de prueba.

    El puro css solución que viene a mi mente es que con un pequeño cambio en el marcado. Usted puede establecer un contenedor sólo para los «elementos» como este:

    <div class="cont_elements">
      <div class="element">......</div>
      .....
</div>

    Y dar el desbordamiento de este recipiente interior. Ahora, su cabecera se pega en la parte superior.

    Aquí un demo.

    • Tenga en cuenta sin embargo, esto no funciona en Chrome, funcionará en IOS, pero no en Chrome para Android. Ver caniuse.com/#feat=css-sticky
    • Ni en Chrome para windows(10) – 3½ años más tarde…
    InformationsquelleAutor Arkana
  2. 5

    jQuery UI añadido un posición() método de utilidad para este propósito que iba a hacer su vida más fácil.

    $( "#someElement" ).position({
    of:  //Element to position against,
    my:  //which position on the element being positioned,
    at:  //which position on the target element eg: horizontal/vertical,
    offset:  //left-top values to the calculated position, eg. "50 50"
});

    Definitivamente me ayudó.

    InformationsquelleAutor Robin Maben
  3. 3

    La solución en este caso sería el pop el título fuera del desplazamiento del elemento:

    <div class="header">title</div>
<div class="container">
    <div class="element">......</div>
    <div class="element">......</div>
</div>

    Aunque probablemente debería tener mejores elementos semánticos, si es posible (sólo una suposición aquí):

    <h3>title</h3>
<ul>
    <li>......</li>
    <li>......</li>
</ul>
    InformationsquelleAutor Madara Uchiha
  4. 0

    La mejor respuesta que usted encontrará nunca a una solución es a través de este enlace Cómo fijo desplázate div después de cierta altura y parada después de llegar a otros div?

    Espero que esto salva a alguien de algunas google momento

    JS:

        var navWrap = $('#navWrap'),
        nav = $('nav'),
        startPosition = navWrap.offset().top,
        stopPosition = $('#stopHere').offset().top - nav.outerHeight();
    
    $(document).scroll(function () {
        //stick nav to top of page
        var y = $(this).scrollTop()
        
        if (y > startPosition) {
            nav.addClass('sticky');
            if (y > stopPosition) {
                nav.css('top', stopPosition - y);
            } else {
                nav.css('top', 0);
            }
        } else {
            nav.removeClass('sticky');
        } 
    });

    CSS:

    body {
    height:1600px;
    margin:0;
}
#navWrap {
    height:70px
}
nav {
    height: 70px;
    background:gray;
}
.sticky {
    position: fixed;
    top:0;
}

h1 {
    margin: 0;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<div id="navWrap">
    <nav>
         <h1>I stick to the top when you scroll down and unstick when you scroll up to my original position</h1>
    </nav>
</div>

<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<br>
<div id="stopHere">
<h3 style="color:red">I want it stop fixed scrolling here. If I'm back to scrolling up, It will follow also to original position.</h3>
</div>
<br>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>

    InformationsquelleAutor Ocool Sanni

Dejar respuesta

Please enter your comment!
Please enter your name here