Parte siempre visible

mblascog · #1 (**permalink**) 06/02/2017, 08:53

Buenas, no tengo claro si debería postear en el foro de jquery o éste.
He visto en una web un detalle y no sé como implementarlo.
Al hacer un scroll vertical, en la parte superior queda una parte fija y la otra desaparece, es decir, inicialmente aparece lo siguiente:

Y al hacer scroll, quisiera que sólo apareciera esto, reduciendo un poco el tamaño, y visualizando, de forma más sencilla, la parte superior, quedando así:

Cómo se trabaja esto?
Gracias

AngelKrak · #2 (**permalink**) 06/02/2017, 23:17

eso puedes hacerlo con solo CSS
solo usa las Media Queries, si no sabes buscalo en google encontraras mucha informacion sobre eso ;)

mblascog · #3 (**permalink**) 07/02/2017, 07:36

Gracias AngelKrak, jamás he usado las media queries para controlar el scroll ni para cuando desaparece una parte de la pantalla. Siempre que las he usado ha sido para controlar el formato dependiendo del ancho de la pantalla. Por esto he preguntado.

Rafael · #4 (**permalink**) 07/02/2017, 12:46

Hum. Nop. Media queries no es lo adecuado para esto.

Este tipo de cosas es por detección de la altura a la que está el elemento con respecto del alto original de la página, por lo que hay que detectarlo con JavaScript.

Básicamente el JavaScript detecta que el scroll ya se realizó y entonces agrega un class nuevo al elemento (por ejemplo header).

En ese Header con un class nuevo ahora se aplican estilos diferentes.

Para que tengan transición puedes jugar por ejemplo "colapsando" los elementos cambiando la altura, y haciendo transiciones css.

Una librería que en especial me gusta es esta: http://imakewebthings.com/waypoints/

Para que veas ejemplos: https://www.google.com.mx/search?q=w...ts+animate+css

En estos casos están usando una librería llamada animate.css pero el concepto es lo que comento arriba. Agregar un class. Para lo de "siempre visible" recuerda agregar en ese class nuevo un position=fixed.

pzin · #5 (**permalink**) 08/02/2017, 11:59

Para futuras referencias, ya algunos navegadores han implementado un nuevo valor para el atributo de posición.

Código CSS:

Ver originalposition: sticky

Que hace eso mismo que preguntas.

Por lo pronto, se queda atrás el de siempre, que por mucho nombre que cambien sigue igual.

Aquí el borrador de la W3C: https://drafts.csswg.org/css-positio...osition-sticky

Rafael · #6 (**permalink**) 08/02/2017, 17:15

Aunque el sticky conservará la posición todavía hace falta un nuevo atributo por ejemplo para cambiarle el tamaño a "Logo" en el ejemplo. :o)

mpozo · #7 (**permalink**) 09/02/2017, 15:32

Hay que usar javascript, pero es un poco exagerado usar una librería. Probemos con javascript nativo

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
            * {
                margin: 0;
                border: none;
                position: relative;
            }
 
            html {
                height: 100%;
            }
 
            body {
                width: 100%;
                height: 100%;
            }
 
            #container {
                height: 1000px;
            }
 
            .header {
                display: -webkit-flex;
                display: flex;
            }
 
            .logo {
                width: 200px;
                background: red;
            }
 
            .flex-column {
                -webkit-flex: 1;
                flex: 1;
                background: yellow;
            }
 
            section {
                background: pink;
            }
 
            section ul {
                list-style: none;
                margin: 0;
            }
 
            .ocultar {
                height: 0;
            }
        </style>
        <script>
            function fijar(obj) {
 
                this.header = obj.header;
                this.ocultar = obj.ocultar;
                this.ocultarHeight = obj.ocultar === null ? 0 : obj.ocultar.offsetHeight;
                this.posElem = (obj.header.offsetTop + this.ocultarHeight)
                this.flag = true;
                var _this = this;
                window.addEventListener('scroll', function() { _this.scroll() });
            }
 
            fijar.prototype.scroll = function() {
 
                var scrollVertical = window.pageYOffset;
 
                if (scrollVertical >= this.posElem && this.flag) {
 
                    this.header.style.position = 'fixed';
                    //this.header.style.top = -this.ocultarHeight + 'px';
                    //this.ocultar.style.display = 'none';
                    this.ocultar.classList.toggle('ocultar');
                    this.flag = false;
 
                } else if (scrollVertical < this.posElem && !this.flag) {
 
                    this.header.style.position = 'static';
                    //this.header.style.top = 0;
                    //this.ocultar.style.display = 'block';
                    this.ocultar.classList.toggle('ocultar');
                    this.flag = true;
                }
 
            }
 
 
            document.addEventListener('DOMContentLoaded', function() {
 
                new fijar({
                    header : document.querySelector('div.header'),
                    ocultar : document.querySelector('#ocultar') // o null
                })
            });
 
        </script>
    </head>
    <body>
 
        <div id="container">
            <div class="header">
                <div class="logo">LOGO</div>
                <div class="flex-column">
                    <section id="ocultar">Teléfono y email</section>
                    <section>
                        <ul>
                            <li>Opción 1</li>
                            <li>Opción 2</li>
                        </ul>
                    </section>
                </div>
            </div>
        </div>
 
    </body>
</html>

mblascog · #8 (**permalink**) 14/02/2017, 06:27

Gracias por vuestras sugerencias aunque para mi un poco complicadas, pero con lo dicho he pensado lo siguiente.
Tengo creadas las dos capas, de inicio, la primera visible y la segunda no

Código CSS:

Ver original#capcalera{
    display:block;
    float:left;
    width:100%;
    background-color:#c2b89f;
    height:89px;
    margin:0
}
#capcalera2{
    display:none;
    float:left;
    width:100%;
    background-color:#c2b89f;
    margin:0;
    top:0;
    position:fixed;
}

Y al detectar el scroll, por jquery, escondo la primera y visualizo la segunda

Código Javascript:

Ver original$(document).on('scroll', function() {
        if ($(document).scrollTop() > 0) {
            $('#capcalera').fadeOut(500);
            $('#capcalera2').fadeIn(500);
        }
        else {
            $('#capcalera').fadeIn(500);
            $('#capcalera2').fadeOut(500);
        }   
    });

Y funciona bien con un pero. Y es que la segunda, capcalera2, al añadir la propiedad position:fixed para que se quede fija a la parte superior, cambia el tamaño,
es decir:
- capcalera2 con position:fixed hace un ancho de 1920
- capcalera2 sin position:fixed hace un ancho de 1190
Y lo que es correcto, por diseño, es 1190.

Y la pregunta es, qué es lo que provoca el cambio de ancho de la capa?

Gracias