Arrêt position fixe au pied de page

je viens de résoudre ce problème sur un site sur lequel je travaille, et j'ai pensé que je pourrais le partager dans l'espoir qu'il aide quelqu'un.

ma solution prend la distance du pied de page au haut de la page - si l'Utilisateur a roulé plus loin que cela, il tire la barre latérale vers le haut avec une marge négative.

$(window).scroll(function () { 

// distance from top of footer to top of document
footertotop = ($('#footer').position().top);
// distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding)
scrolltop = $(document).scrollTop()+570;
// difference between the two
difference = scrolltop-footertotop;

// if user has scrolled further than footer,
// pull sidebar up using a negative margin

if (scrolltop > footertotop) {

$('#cart').css('margin-top',  0-difference);
}

else  {
$('#cart').css('margin-top', 0);
}


});

j'ai rencontré ce même problème récemment, posté la solution de mon ici aussi: empêcher l'affichage d'un élément sur le dessus du pied de page lorsqu'on utilise la position: fixe

vous pouvez obtenir une solution en utilisant la propriété position de l'élément avec jQuery, en changeant 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, afin de empêcher l'élément fixe de passer 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 de le comparer avec la position verticale actuelle de la barre de défilement relativement à l'objet fenêtre (c.-à-d. le nombre de pixels ci-dessus qui sont cachés de la zone visible de la page) chaque fois que l'utilisateur parcourt la page. Lorsque, sur le défilement en bas, l'élément fixe est sur le point de disparaître ci-dessus, nous changeons sa position pour fixe et Coller en haut de la page.

Cela fait passer l'élément fixe au-dessus du pied de page lorsque nous faisons défiler vers le bas, surtout si la fenêtre du navigateur est petite. Par conséquent, nous allons calculer la distance en pixels du pied de page à partir du haut du document et de 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 d'aller au-dessus du pied de page, nous allons changer sa position en absolue 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>  

The 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 */
}

The 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');
    }

 });

Voici la solution @Sang mais sans Jquery.

var socialFloat = document.querySelector('#social-float');
var footer = document.querySelector('#footer');

function checkOffset() {
  function getRectTop(el){
    var rect = el.getBoundingClientRect();
    return rect.top;
  }
  
  if((getRectTop(socialFloat) + document.body.scrollTop) + socialFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10)
    socialFloat.style.position = 'absolute';
  if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
    socialFloat.style.position = 'fixed'; // restore when you scroll up
  
  socialFloat.innerHTML = document.body.scrollTop + window.innerHeight;
}

document.addEventListener("scroll", function(){
  checkOffset();
});

div.social-float-parent { width: 100%; height: 1000px; background: #f8f8f8; position: relative; }
div#social-float { width: 200px; position: fixed; bottom: 10px; background: #777; }
div#footer { width: 100%; height: 200px; background: #eee; }

<div class="social-float-parent">
    <div id="social-float">
        float...
    </div>
</div>
<div id="footer">
</div>

ça a marché pour moi -

HTML -

<div id="sideNote" class="col-sm-3" style="float:right;">

</div> 
<div class="footer-wrap">
        <div id="footer-div">
        </div>      
</div>

CSS -

#sideNote{right:0; margin-top:10px; position:fixed; bottom:0; margin-bottom:5px;}

#footer-div{margin:0 auto; text-align:center; min-height:300px; margin-top:100px; padding:100px 50px;}

JQuery -

function isVisible(elment) {
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elment).offset().top;

    return y <= (vpH + st);
}

function setSideNotePos(){
    $(window).scroll(function() {
        if (isVisible($('.footer-wrap'))) {
            $('#sideNote').css('position','absolute');
            $('#sideNote').css('top',$('.footer-wrap').offset().top - $('#sideNote').outerHeight() - 100);
        } else {
            $('#sideNote').css('position','fixed');
            $('#sideNote').css('top','auto');
        }
    });
}

appelez maintenant cette fonction comme ceci -

$(document).ready(function() {
    setSideNotePos();
});

PS-les fonctions Jquery sont copiées à partir d'une réponse à une autre question similaire sur stackoverflow, mais cela ne fonctionnait pas complètement pour moi. Donc je l'ai modifié à ces fonctions, comme elles sont montrées ici. Je pense que le les attributs de position etc à vos divs dépendra de la façon dont les divs sont structurés, qui leurs parents et leurs frères et sœurs sont.

la fonction ci-dessus fonctionne lorsque le sideNote et le foot-wraps sont des frères et sœurs directs.

j'ai apporté une modification à la réponse de @user1097431:

function menuPosition(){
// distance from top of footer to top of document
var footertotop = ($('.footer').position().top);
// distance user has scrolled from top, adjusted to take in height of bar (42 pixels inc. padding)
var scrolltop = $(document).scrollTop() + window.innerHeight;
// difference between the two
var difference = scrolltop-footertotop;

// if user has scrolled further than footer,
// pull sidebar up using a negative margin
if (scrolltop > footertotop) {
    $('#categories-wrapper').css({
       'bottom' : difference
   });
}else{
    $('#categories-wrapper').css({
       'bottom' : 0
   });
 };
};