Tema: Parte siempre visible
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 09/02/2017, 15:32
mpozo
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 9 años
Puntos: 86
Respuesta: Parte siempre visible
Hay que usar javascript, pero es un poco exagerado usar una librería. Probemos con javascript nativo
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="es-es">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
  7.         <style>
  8.             * {
  9.                 margin: 0;
  10.                 border: none;
  11.                 position: relative;
  12.             }
  13.  
  14.             html {
  15.                 height: 100%;
  16.             }
  17.  
  18.             body {
  19.                 width: 100%;
  20.                 height: 100%;
  21.             }
  22.  
  23.             #container {
  24.                 height: 1000px;
  25.             }
  26.  
  27.             .header {
  28.                 display: -webkit-flex;
  29.                 display: flex;
  30.             }
  31.  
  32.             .logo {
  33.                 width: 200px;
  34.                 background: red;
  35.             }
  36.  
  37.             .flex-column {
  38.                 -webkit-flex: 1;
  39.                 flex: 1;
  40.                 background: yellow;
  41.             }
  42.  
  43.             section {
  44.                 background: pink;
  45.             }
  46.  
  47.             section ul {
  48.                 list-style: none;
  49.                 margin: 0;
  50.             }
  51.  
  52.             .ocultar {
  53.                 height: 0;
  54.             }
  55.         </style>
  56.         <script>
  57.             function fijar(obj) {
  58.  
  59.                 this.header = obj.header;
  60.                 this.ocultar = obj.ocultar;
  61.                 this.ocultarHeight = obj.ocultar === null ? 0 : obj.ocultar.offsetHeight;
  62.                 this.posElem = (obj.header.offsetTop + this.ocultarHeight)
  63.                 this.flag = true;
  64.                 var _this = this;
  65.                 window.addEventListener('scroll', function() { _this.scroll() });
  66.             }
  67.  
  68.             fijar.prototype.scroll = function() {
  69.  
  70.                 var scrollVertical = window.pageYOffset;
  71.  
  72.                 if (scrollVertical >= this.posElem && this.flag) {
  73.  
  74.                     this.header.style.position = 'fixed';
  75.                     //this.header.style.top = -this.ocultarHeight + 'px';
  76.                     //this.ocultar.style.display = 'none';
  77.                     this.ocultar.classList.toggle('ocultar');
  78.                     this.flag = false;
  79.  
  80.                 } else if (scrollVertical < this.posElem && !this.flag) {
  81.  
  82.                     this.header.style.position = 'static';
  83.                     //this.header.style.top = 0;
  84.                     //this.ocultar.style.display = 'block';
  85.                     this.ocultar.classList.toggle('ocultar');
  86.                     this.flag = true;
  87.                 }
  88.  
  89.             }
  90.  
  91.  
  92.             document.addEventListener('DOMContentLoaded', function() {
  93.  
  94.                 new fijar({
  95.                     header : document.querySelector('div.header'),
  96.                     ocultar : document.querySelector('#ocultar') // o null
  97.                 })
  98.             });
  99.  
  100.         </script>
  101.     </head>
  102.     <body>
  103.  
  104.         <div id="container">
  105.             <div class="header">
  106.                 <div class="logo">LOGO</div>
  107.                 <div class="flex-column">
  108.                     <section id="ocultar">Teléfono y email</section>
  109.                     <section>
  110.                         <ul>
  111.                             <li>Opción 1</li>
  112.                             <li>Opción 2</li>
  113.                         </ul>
  114.                     </section>
  115.                 </div>
  116.             </div>
  117.         </div>
  118.  
  119.     </body>
  120. </html>