Modifier dynamiquement la position du pied de page avec jQuery après le changement de contenu

-1

J'ai un menu composé de 4 images dans une liste non ordonnée, chacune avec du texte dedans (info), initialement caché. Lorsque l'utilisateur clique sur l'une de ces images, le texte d'information correspondant est affiché ou masqué avec une fonction d'animation jQuery.Modifier dynamiquement la position du pied de page avec jQuery après le changement de contenu

J'ai un pied de page que j'avais l'intention de toujours être 40px vers le haut à partir du bas de la page. Le problème est le suivant: lorsque le menu est cliqué et qu'une partie du texte d'information est affichée, cela augmente la hauteur du corps, affichant ainsi la barre de défilement verticale dans la fenêtre du navigateur.

Cependant, le pied de page reste au même endroit, sans tenir compte de la nouvelle hauteur de l'élément de corps.

Comment l'obtenir pour suivre l'animation du menu, se déplaçant vers le haut/bas mais toujours à 40px du bas de la fenêtre du navigateur?

Ce jsFiddle reproduit l'essence du problème: http://jsfiddle.net/bmscmoreira/6r4K9/8/

Mon HTML est comme ceci:

<body> 
    <div id="menu"> 
     <ul class="accordion"> 
      <li> 
       <img id="menu-item-1" src="img/menu-item-1.png" alt="1"> 
      </li> 
      <li class="info"> 
       <p>here goes full text for menu item 1</p> 
      </li> 
      <li> 
       <img id="menu-item-2" src="img/menu-item-2.png" alt="2"> 
      </li> 
      <li class="info"> 
       <p>here goes full text for menu item 2</p> 
      </li> 
      <li> 
       <img id="menu-item-3" src="img/menu-item-3.png" alt="3"> 
      </li> 
      <li class="info"> 
       <p>here goes full text for menu item 3</p> 
      </li> 
      <li> 
       <img id="menu-item-4" src="img/menu-item-4.png" alt="4"> 
      </li> 
      <li class="info"> 
       <p>here goes full text for menu item 4</p> 
      </li> 
     </ul> 
    </div> 
    <div id="footer"> 
     <p>footer text</p> 
    </div> 
</body>

jQuery fonction d'animation qui affiche ou masque le texte intégral des éléments de menu:

<script type="text/javascript"> 
$(document).ready(function($) { 
    $('.accordion > .info').hide(); 
    $('.accordion > li > img').click(function(){ 

     if ($(this).hasClass('selected')) { 
      $(this).removeClass('selected'); 
      $(this).parent().next().slideUp(); 
     } else { 
      $('.accordion > li > img').removeClass('selected'); 
      $(this).addClass('selected'); 
      $('.accordion > .info').slideUp(); 
      $(this).parent().next().slideDown(); 
     } 
     return false; 
    }); 
}); 
</script>

CSS:

html { 
background-color: #666666; 
} 

#footer { 
position: absolute; 
bottom:40px; 
} 

#menu { 
position: relative; 
margin-left:55px; 
margin-top:75px; 
}

Source

2014-05-16 BMM

Cette question semble trop spécifique. Vous auriez pu essayer d'enquêter sur la cause première et fournir plus de code et d'informations à la question, afin qu'elle puisse s'appliquer à d'autres personnes qui recherchent le même problème que vous. – falsarella

Par ailleurs, placer un code de référence est beaucoup mieux que de placer un lien car il indexe les recherches google et il est permanent (un lien pourrait être brisé à long terme, et dans ce cas, votre question deviendrait également inutile à la base de connaissances). Je vous recommande de lire entièrement l'aide de StackOverflow.Il est situé sur la droite de votre réputation et des badges. – falsarella

J'ai édité cette question et j'ai essayé de la faire mieux expliquer. Veuillez envisager de réviser l'utilité de cette question. Merci. – BMM

Essayez:

$('html, body').animate({ 
    scrollTop: $("#elementtoScrollToID").offset().top 
}, 2000);

Vous voulez mettre ce code dans votre auditeur .click() afin que les pages à un élément correspondant.

Source

Source

2014-05-16 22:53:01 martynas

Merci d'avoir essayé de nous aider. Je n'étais pas assez clair, j'espère que c'est maintenant. – BMM

Le position: absolute; combiné avec bottom: 40px; gardera la #footer 40px au-dessus du bord inférieur du navigateur:

#footer.bottomApproach { 
    position: absolute; 
    bottom: 40px; 
}

Le margin-top: 200px; combiné avec margin-bottom: 40px; gardera le #footer suivant le texte du contenu:

#footer.followApproach { 
    margin-top: 80px; 
    margin-bottom: 40px; 
}

Utilisez jQuery pour gérer dynamiquement la stratégie d'approche avec quelque chose comme ça:

$('.accordion > li > img').click(function(){ 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     $(this).parent().next().slideUp(); 
    } else { 
     $('.accordion > li > img').removeClass('selected'); 
     $(this).addClass('selected'); 
     $('.accordion > .info').slideUp(); 
     $(this).parent().next().slideDown(); 
    } 
    if ($(document).height() > $(window).height()) { 
     $("#footer").removeClass("bottomApproach").addClass("followApproach"); 
    } else { 
     $("#footer").removeClass("followApproach").addClass("bottomApproach"); 
    } 
    return false; 
});

Enfin, par défaut, commencer à utiliser le bottomApproach, puisque tous les menuitems seront effondrés:

<div id="footer" class="bottomApproach"> 
    <p>footer text</p> 
</div>

Source

2014-05-16 23:00:06 falsarella

J'ai peut-être mal compris la question ... – martynas

@martynas Oui, vous pouvez, mais sa question est aussi vague et spécifique (elle ne nous a peut-être pas guidés à la bonne compréhension), donc la seule façon de résoudre est d'accéder au lien essayant de voir de quoi il parle. – falsarella

J'ai édité cette question et j'ai essayé de la faire mieux expliquer. Veuillez envisager de réviser l'utilité de cette question. Merci. – BMM

Modifier dynamiquement la position du pied de page avec jQuery après le changement de contenu

Répondre

Questions connexes