Empêcher l'affichage de l'élément au-dessus du pied de page lors de l'utilisation: fixe

Question

Je souhaite utiliser la position de la propriété CSS: fixe pour fixer la position d'un élément mais en même temps empêcher que l'élément soit positionné sur mon pied de page l'utilisateur fait défiler vers le bas de la page. Y a-t-il un moyen d'empêcher un élément de s'afficher de cette manière?

Answer 1

Si vous voulez que l'élément à fixer parfois, mais pas d'autres, vous devez utiliser JavaScript pour ajouter/supprimer position:fixed

tout d'abord mis l'élément sans position:fixed pour qu'il apparaisse dans la page au-dessus du pied de page où vous le voulez une fois défilé vers le bas.

Définissez ensuite une classe css que lorsqu'il est ajouté à l'élément fixe sa position, quelque chose comme:

div#sometimesfixed.fixed 
{ 
    position:fixed; 
    bottom: 0px; 
} 

Le code suivant utilise jquery, détecte la position de défilement sur la page, et ajoute/supprime la classe fixed en conséquence:

$(window).scroll(function (event) { 
    var windowTop = $(this).scrollTop();   
    if (windowTop >= $("#footer").offset().top) { 
     $("div#sometimesfixed").addClass("fixed"); 
    } else { 
     $("div#sometimesfixed").removeClass("fixed"); 
    } 
}); 

Answer 2

Ajoutez margin-bottom supplémentaire à votre pied de page afin que l'utilisateur puisse défiler un peu vers le bas pour que votre pied de page puisse effacer l'élément fixe.

Answer 3

Tant que tous les éléments sont positionnés (absolus ou relatifs), vous pouvez utiliser l'attribut z-index. La valeur par défaut est 0, donc donnez à votre pied de page une valeur plus élevée et il apparaîtra au-dessus de l'autre contenu.

Answer 4

je suis tombé sur cette même question récemment. Vous pouvez obtenir une solution en tirant parti de la propriété position de l'élément avec jQuery, en basculant entre la valeur par défaut (static pour divs), fixed et absolute. Vous aurez également besoin d'un élément de conteneur pour votre élément fixe. Enfin, pour éviter que l'élément fixe ne passe au-dessus du pied de page, cet élément conteneur ne peut pas être le parent du pied de page. La partie javascript consiste à calculer la distance en pixels entre votre élément fixe et le haut du document, et à le comparer à la position verticale actuelle de la barre de défilement par rapport à l'objet fenêtre (le nombre de pixels au-dessus est caché) à partir de la zone visible de la page) chaque fois que l'utilisateur fait défiler la page. Lorsque, en faisant défiler vers le bas, l'élément fixe est sur le point de disparaître au-dessus, nous changeons sa position pour fixer et coller sur le dessus de la page. Cela provoque le déplacement de l'élément fixe sur le pied de page lorsque nous naviguons vers le bas, en particulier si la fenêtre du navigateur est petite. Par conséquent, nous allons calculer la distance en pixels du pied de page depuis le haut du document et le comparer avec la hauteur de l'élément fixe plus la position verticale de la barre de défilement: lorsque l'élément fixe est sur le point de passer, va changer sa position à l'absolu et coller au fond, juste au-dessus du pied de page.

Voici un exemple générique.

La structure HTML:

<div id="content"> 
    <div id="leftcolumn"> 
     <div class="fixed-element"> 
      This is fixed 
     </div> 
    </div> 
    <div id="rightcolumn">Main content here</div> 
    <div id="footer"> The footer </div> 
</div> 

Le CSS:

#leftcolumn { 
    position: relative; 
} 
.fixed-element { 
    width: 180px; 
} 
.fixed-element.fixed { 
    position: fixed; 
    top: 20px; 
} 
.fixed-element.bottom { 
    position: absolute; 
    bottom: 356px; /* Height of the footer element, plus some extra pixels if needed */ 
} 

La JS:

// Position of fixed element from top of the document 
var fixedElementOffset = $('.fixed-element').offset().top; 
// Position of footer element from top of the document. 
// You can add extra distance from the bottom if needed, 
// must match with the bottom property in CSS 
var footerOffset = $('#footer').offset().top - 36; 

var fixedElementHeight = $('.fixed-element').height(); 

// Check every time the user scrolls 
$(window).scroll(function (event) { 

    // Y position of the vertical scrollbar 
    var y = $(this).scrollTop(); 

    if (y >= fixedElementOffset && (y + fixedElementHeight) < footerOffset) { 
     $('.fixed-element').addClass('fixed'); 
     $('.fixed-element').removeClass('bottom');   
    } 
    else if (y >= fixedElementOffset && (y + fixedElementHeight) >= footerOffset) { 
     $('.fixed-element').removeClass('fixed');   
     $('.fixed-element').addClass('bottom'); 
    } 
    else { 
     $('.fixed-element').removeClass('fixed bottom'); 
    } 

});