0

Todo el cuadro de Sensores esta encapsulado, este le permite posicionarse del lado derecho. Me gustaria que este al entrar la pagina este a la altura de UPS EATON y se quede estatico a partir de ese momento hasta el final de la pagina.

Espero haberme explicado

la seccion de sensores al entrar a la pagina, invade la zona de ambiente

Todo el cuadro de Sensores esta encapsulado, este le permite posicionarse del lado derecho. Me gustaria que este al entrar la pagina este a la altura de UPS EATON y se quede estatico a partir de ese momento hasta el final de la pagina. Sin invadir la sección de ambiente.

todo en la parte de abajo esta diseñado para permitir este deslizamiento de sensores y que no obstruya

Conocen algun solucion para mi problema?

les dejo un poco del html y del css de la secciones de sensores, gracias!

/* Estilos para el límite de desplazamiento */
.side-limits {
    position: fixed;
    top: 165px; 
    right: 20px; 
    width: 200px; 
    height: 300px; 
}

/* Estilos para el cuadro estático */
.side-static {
    position: fixed;
    top: 10px; 
    right: 200px; 
    width: 100px; 
    height: 100px; 
    background-color: #f00; 
    margin-right: 10px; 
    /* margin-top: 80px; */
}


.side-container {
    background-color: white;
    display: flex;
    justify-content: left;
    align-items: left;
    flex-direction: column; 
    height: 100vh; 
    padding: 0;
    margin: 0;
    margin-bottom: -250px;
    
    /* ESTE ES EL MAIN-CONTAINER 
    Estilos para el contenedor principal, si es necesario */
}

.side-tittle {
    margin: 0;
    /* Estilos para el título del cuadro, si es necesario */
}

.side-custom {
    background-color: #e0e0e0; /* Color de fondo más oscuro del contenedor */
    border-radius: 10px; /* Esquinas redondeadas */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra para resaltar el contenedor */
    max-width: 1400px; /* Anchura máxima del contenedor */
    margin-top: 10px; /* Añadir un margen superior para separar del h2 */
    width: 300px;
    height: 495px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    
    /* ESTE ES EL CISTOM-CONTAINER
    Estilos para el contenedor personalizado, si es necesario */
}

.side-items {
    display: flex;
    flex-direction: row;
    height: 100%;

    /* CONTAINER-ITEMS
    Estilos para los ítems dentro del contenedor, si es necesario */
}

.side-box {
    background-color: #d0d0d0; /* Color de fondo de los rectángulos internos */
    flex: 1;
    height: px;
    width: 290px;
    border-radius: 10px; /* Esquinas redondeadas */
    margin: 5px;
    /* 
    INNER-BOX
    Estilos para el cuadro dentro del contenedor, si es necesario */
}
<div class="side-limits" id="side-limits">
        <div class="side-static">
            <div class="side-container">
                <h2>Sensores</h2>
                <div class="side-custom">
                    <div class="side-tittle">
                        <h3>Agua Piso</h3>
                    </div>
                    <div class="side-items">
                        <div class="side-box">
                            <p>cargando...</p>
                        </div>
                    </div>
                    <div class="side-tittle">
                        <h3>Temperatura</h3>
                    </div>
                    <div class="side-items">
                        <div class="side-box">
                            <p>cargando...</p>
                        </div>
                    </div>
                    <div class="side-tittle">
                        <h3>Humo</h3>
                    </div>
                    <div class="side-items">
                        <div class="side-box">
                            <p>cargando...</p>
                        </div>
                    </div>
                    <div class="side-tittle">
                        <h3>Seguridad</h3>
                    </div>
                    <div class="side-items">
                        <div class="side-box">
                            <p>cargando...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

es importante mencionar que los valores de la funcion top en .side-static, al darle valor a top es el espacio total sobre el limite superior de la pagina, si este aumento SI se desplaza hacia abajo pero se oculta de manera fija y no se visualiza toda la informacion completa

Gracias!!!

1
  • si colocas un ejemplo completo te ayudo con el codigo
    – John
    Commented el 9 ago. 2023 a las 20:05

1 respuesta 1

0

Tu tienes una estructura como esta:

introducir la descripción de la imagen aquí

La primera parte de elementos están ordenados en 5 columnas, esta parte es irrelevante para el problema, ya que lo importante viene abajo, y básicamente no afectará en nada.

Luego tienes una serie de elementos que tienen 4 columnas, que se posicionan a la izquierda y una barra lateral a la derecha.

Entonces es tan simple como dictar que lo de la izquierda tiene un ancho del 80% y la barra lateral un 20%, además esta barra flotara a la derecha (float:right;) y su posición será position:sticky que es lo que finalmente hace todo el truco.

section{
  display:grid;
  gap:10px;
}

.cuatroCol{
    grid-template-columns:repeat(4, 1fr);
}

.cincoCol{
    grid-template-columns:repeat(5, 1fr);
}

.cuadro{
  height:100px;
  background-color:blue;
}

.leftside{
  width:80%;
  display: inline-block;
}
aside{
  position:sticky;
  top:30px;
  float: right;
  width: calc(20% - 10px);
  margin-left:10px;
}
aside > div{
  background-color:red;
  padding: 0 10px;
}
<h2>Ambiente</h2>
<section class="cincoCol">
  <div class="cuadro"></div>
  <div class="cuadro"></div>
  <div class="cuadro"></div>
  <div class="cuadro"></div>
  <div class="cuadro"></div>
</section>


<div class="leftside">
  <h2>UPS EATORN</h2>
  <section class="cuatroCol">
    <div class="cuadro"></div>
    <div class="cuadro"></div>
    <div class="cuadro"></div>
    <div class="cuadro"></div>
  </section>
</div>

<aside>
  <h2>SENSORES</h2>
  <div>
    <div>AAAAAA</div>
    <div>AAAAAA</div>
    <div>AAAAAA</div>
    <div>AAAAAA</div>
    <div>AAAAAA</div>
    <div>AAAAAA</div>
    <div>AAAAAA</div>
    <div>AAAAAA</div>
  </div>
</aside>

<div class="leftside">
  <h2>OTRA COSA</h2>
  <section class="cuatroCol">
    <div class="cuadro"></div>
    <div class="cuadro"></div>
    <div class="cuadro"></div>
    <div class="cuadro"></div>
  </section>
</div>

<div class="leftside">
  <h2>OTRA COSA</h2>
  <section class="cuatroCol">
    <div class="cuadro"></div>
    <div class="cuadro"></div>
    <div class="cuadro"></div>
    <div class="cuadro"></div>
  </section>
</div>

1
  • Muchas gracias Yussef!! resolviste mi problema, saludos :) Commented el 23 ago. 2023 a las 15:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.