Ajuste automático del margen de la sección de contenido principal basado en el encabezado fijo variable altat

https://g7uuvt72cje7i7gh-26803830855.shopifypreview.com/ (Vista móvil) En este momento tengo que .main-content tiene un margen-top basado en el pegajoso-animate, que pone la cabecera fija en la parte superior en el móvil. El punto es, como se puede ver, hay una div que se puede cerrar con la X, variando la altura. Esto no cambia el margen, dejando un espacio bastante malo. El java utilizado es:

if (jQuery(window).width() < 425) {
$(function(){
    $('.main-content').each(function(){
        var headerHeight=$('.sticky-animate').height();
        // headerHeight+=15; // maybe add an offset too?
        $(this).css('margin-top',headerHeight+'px');
    });
});
}

¿Alguien puede ayudarme a mejorar esto de una manera que se adapte? El guión que funciona en la barra escondite es:

function Hide(HideID) 
{
  HideID.style.display = "none"; 
}
  

    X

Espero que alguien pueda ayudarme.

Pregunta hecha hace 3 años, 5 meses, 0 días - Por compilerchieftain

3 Respuestas:

  • Básicamente desea re-correr la función de altura del encabezado cuando el bar está cerrado.

    Reestructuraré su código un poco para evitar la duplicación.

    Prueba algo así:

    function setMargin(index, element) {
    var headerHeight=$('.sticky-animate').height();
    $(element).css('margin-top',headerHeight+'px');
}

if (jQuery(window).width() < 425) {
    $(function(){
        $('.main-content').each(setMargin);
    });
}

function Hide(HideID) 
{
    HideID.style.display = "none";
    $('.main-content').each(setMargin);
}

    Respondida el Dec 17, 2020 a las 09:42 - por byteexplorer

    Votos positivos: 0 | Votos negativos: 0

  • Para ajustar automáticamente el margen de la sección de contenido principal basado en el encabezado fijo variable y la altura de la sección que se puede cerrar con la "X", puedes modificar tu script de la siguiente manera:

    javascript
if (jQuery(window).width() < 425) {
  $(function(){
    $('.main-content').each(function(){
      var headerHeight = $('.sticky-animate').height();
      var closableSectionHeight = $('closable-section').height();      
      // Ajustar el margen en función de la suma de la altura del encabezado fijo y la sección que se puede cerrar
      var totalHeight = headerHeight + closableSectionHeight;
      $(this).css('margin-top', totalHeight + 'px');
    });
  });
}

function Hide(HideID) {
  HideID.style.display = "none"; 
}

    En este script, se ha agregado una variable closableSectionHeight que obtiene la altura de la sección que se puede cerrar con la "X". Luego, se calcula la totalHeight sumando la altura del encabezado fijo y la sección que se puede cerrar, y se utiliza para ajustar el margen superior de la .main-content.

    Además, ten en cuenta que en el HTML de la sección que se puede cerrar, deberías tener un id (id="closable-section") para poder identificarla en el script:

    html

    
  Contenido de la sección que se puede cerrar

    Espero que esta modificación te ayude a lograr el ajuste automático del margen de la sección de contenido principal de manera adecuada. ¡Déjame saber si tienes alguna otra pregunta o necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 09:47 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución:

    Para ajustar automáticamente la altura superior del .main-content según la altura variable del elemento que se puede cerrar con la "X", puedes modificar el código JavaScript de la siguiente manera:

    javascript
if (jQuery(window).width() < 425) {
  $(function () {
    $('.main-content').each(function () {
      var headerHeight = $('.sticky-animate').height();
      var rightShowingHeight = $('right-showing').height();      // headerHeight += 15; // maybe add an offset too?
      $(this).css('margin-top', (headerHeight + rightShowingHeight) + 'px');
    });
  });
}

    Explicación:

    Se agrega una variable rightShowingHeight para obtener la altura del elemento que se cierra con la "X". Se suma la altura de headerHeight y rightShowingHeight al margin-top de .main-content, lo que dinámicamente ajusta la altura superior en función de la altura variable del elemento.

    Nota:

    • El espaciado adicional de 15 píxeles que habías agregado en el código original se ha comentado porque puede que no sea necesario en este caso.

    Respondida el Dec 18, 2020 a las 09:54 - por Gemini

    Votos positivos: 0 | Votos negativos: 0