A continuación se muestra el diseño de mi aplicación: http://jsfiddle.net/rhgyLjvx/

Tiene el encabezado principal de la aplicación (rojo), el encabezado de la sección adhesiva (azul oscuro), el pie de página fijo (gris) y el navegador lateral izquierdo fijo (verde). La aplicación debe tener barras de desplazamiento completas en ambos lados. Y debe desplazarse solo por la sección principal (amarillo).

El desplazamiento vertical ocurre como yo quiero. Pero el encabezado de sección adhesiva (azul oscuro) se desplaza horizontalmente con la sección.

¿Hay alguna forma de fijar el encabezado adhesivo en los lados izquierdo y derecho y dejar de desplazarse hacia los lados?

Estoy teniendo otro gran problema. Toda mi aplicación se desplaza en dispositivos, incluidos los divs de posición fija. Por favor verifique en el emulador móvil.

Array.from(document.querySelectorAll('.Sticky')).forEach((stickyEl) => {
console.log("&&&&&&&&&&&&&&&&&&& ", stickyEl)
	Stickyfill.add(stickyEl);
});
#root, body, html {
    height: 100%;
    width: 100%;
}
    
    .app {
    height: 100%;
    width: 100%;
}

.main {
    padding-top: 70px;
    height: 100%;
    box-sizing: border-box;
}

.header {
    width: 100%;
    float: left;
    min-height: 70px;
    max-height: 70px;
    background-color:red;
    padding: 20px;
    box-sizing: border-box;
    position: fixed;
	z-index: 999; 
}
.sidenav {
  background-color:green;
    width: 250px;
    float: left;
    overflow-y: auto;
    position: fixed;
    height: 100%;
	z-index: 999; 
}

.landing {
    height: 100%;
    background-color: black;
    position: absolute;
    left: 250px;
}

.content {
    padding: 5px;
    height: 100%;
	background-color: grey;
}
.view {
    width: 100%;
   background-color: aqua;
}
.page-header {  
    
    background-color: #0c004a;
    height: 50px;
    z-index: 999;   
    position: sticky;
    top: 70px;
    right: 0;
    left: 250px;
    margin-left: 5px;
    margin-right: 5px;
}

.page-section {
    flex: 0 1 auto;
    
    margin-bottom: 50px;
     background-color: purple;
}
.page-content {
    width: 100%;
    background-color: pink;
}

.page-panel {
    display: block;    
    background-color: yellow;
    margin-bottom: .5rem;
    width: 75rem;
    min-height: 43.8rem;
}

.page-footer {
    height: 50px;
    background-color: #979797;
    opacity: 1;    
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 250px;
}
    <div id="root">
      <div class="app">
        <header id="app-header" class="header"></header>
          <div class="main">
            <nav id="side-nav" class="sidenav"></nav>
            <div class="landing">
              <div class="content">
                <div id="adeb-maint" class="view">
                  <div class="Sticky page-header"></div>
                    <div class="page-section">
                    <div class="page-content">
                      <div class="page-panel" style="width: 75rem; min-height:       43.8rem;">
                        <label>Customer WWDSSD:</label>
                        <label style="margin-top: 750px;display: block;">Last Change  skdjskdq   :</label>
                      </div>
                    </div>
                   </div>
                   <div class="page-footer">
                      <div class="actions-bar">
                        <button name="OK" class="ok">OK</button>
                        <button name="Cancel" class="cancel">Cancel</button>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div> 
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.0.3/stickyfill.min.js"></script>
0
user4152111 5 mar. 2018 a las 02:22

3 respuestas

La mejor respuesta

Limpieza de código Modifiqué el HTML porque parecía tener muchos DIVS anidados que no servían para ningún propósito

También hubo referencias a clases que no estaban en su CSS, el JavaScript (jQuery) no sirvió para nada (no para el contenido que nos ha proporcionado)

Código de vista previa He visto el código en una ventana de vista previa más grande y funciona bien, deberá modificar el CSS para reflejar la altura que desea.

#root, body, html {
  width: 100%;
  margin: 0
}
header {
  background-color:red;
  position: fixed;
  width: 100%;
  min-height: 70px;
  max-height: 70px;
  box-sizing: border-box;
  padding: 20px;
  z-index: 2; 
}

.pro-main {
  padding-top: 70px;
  box-sizing: border-box;
}

nav {
  background-color:green;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  width: 250px;
  z-index: 2; 
}

.pro-landing {
  position: absolute;
  left: 250px;
  background: #979797;
  padding: 5px;

}

.objectview {
  width: 100%;
  background-color: aqua;
}

.card-header {  
  background-color: #0c004a;
  position: fixed;
  top: 70px;
  height: 50px;
  width: 100% ;
  z-index: 5;
  border-top: 5px solid #979797;
}

.card-section {
  margin-bottom: 50px;
  width: 100%;
}


.card-panel {
  display: block;    
  background-color: yellow;
  margin-bottom: .5rem;
  padding-top: 50px;
  width: 75rem;
  min-height: 43.8rem;
}

.card-footer {
  background-color: #979797;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 250px;
  height: 50px;
  text-align: right;
  line-height: 3em;
  padding-right: 1ex;
}
<div id="root">
  <header id="app-header" class="pro-header"></header>
<div class="pro-main">
    <nav id="side-nav"></nav>
    <div class="pro-landing">
      <div id="deb/m10mast/debtor-maint" class="objectview">
          
          <div class="card-section">
<div class="card-header"></div>
        <div class="card-panel" style="width: 75rem; min-height:       43.8rem;">
        

              <label>Customer WWDSSD:</label>
              <label style="margin-top: 750px;display: block;">Last Change  skdjskdq   :</label>
            </div>
          </div>
          <div class="card-footer">
            <div>
              <button name="OK" class="ok">OK</button>
              <button name="Cancel" class="cancel">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
0
DataCure 5 mar. 2018 a las 02:05

Necesita aprender sobre la visualización de CSS: flex et al. Tutorial

O puede encontrar un ejemplo aquí

La verdadera ventaja aquí es el tamaño de la página y los cambios de orientación que se manejan por usted.

0
McMurphy 4 mar. 2018 a las 23:36
 /* You just need to update it like following */
 .card-panel
 {
position: absolute;
}

.card-header {

position: fixed;
top: 78px;
right: 0;
left: 254px;

}
0
Roopesh 5 mar. 2018 a las 06:00