Arresto posizione fissa al piè di pagina

Question

Sto cercando una soluzione al problema popolare di fermare un oggetto fisso in fondo alla pagina.

Fondamentalmente ho una casella "condivisione" fissa nell'angolo in basso a sinistra dello schermo e non voglio che scorrano sopra il piè di pagina, quindi ho bisogno di fermarsi a circa 10px sopra il piè di pagina.

Ho esaminato altre domande qui e altre. La demo più vicina/più semplice che ho trovato è http://jsfiddle.net/bryanjamesross/VtPcm/ ma non ho potuto farlo funzionare con la mia situazione.

Ecco il codice HTML per la finestra di condivisione:

<div id="social-float"> 
     <div class="sf-twitter"> 
      ... 
     </div> 

     <div class="sf-facebook"> 
      ... 
     </div> 

     <div class="sf-plusone"> 
      ... 
     </div> 
    </div> 

... e il CSS:

#social-float{ 
position: fixed; 
bottom: 10px; 
left: 10px; 
width: 55px; 
padding: 10px 5px; 
text-align: center; 
background-color: #fff; 
border: 5px solid #ccd0d5; 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
display: none; 
} 

Il piè di pagina è #footer e non avere un'altezza fissa, se questo ha un qualsiasi differenza

Se qualcuno potesse aiutarmi a creare una semplice soluzione jQuery per questo, lo apprezzerei molto!

Answer 1

Live demo

prima, verificarne l'offset ogni volta che si scorre la pagina di

$(document).scroll(function() { 
    checkOffset(); 
}); 

e rendere la sua posizione assoluta se è stato abbattuto sotto 10px prima del piè di pagina.

function checkOffset() { 
    if($('#social-float').offset().top + $('#social-float').height() 
              >= $('#footer').offset().top - 10) 
     $('#social-float').css('position', 'absolute'); 
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) 
     $('#social-float').css('position', 'fixed'); // restore when you scroll up 
} 

preavviso quel genitore #social-float s' dovrebbe essere di pari livello del piè di pagina

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

buona fortuna :)

Answer 2

Ho appena risolto questo problema su un sito su cui sto lavorando, e ho pensato di condividerlo con la speranza che aiuti qualcuno.

La mia soluzione prende la distanza dal piè di pagina alla parte superiore della pagina - se l'utente ha scostato ulteriormente, tira indietro la barra laterale con un margine negativo.

$(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); 
} 


}); 

Answer 3

Mi sono imbattuto in questo stesso problema di recente, pubblicato la mia soluzione anche qui: Preventing element from displaying on top of footer when using position:fixed

è possibile ottenere una soluzione sfruttando la proprietà position dell'elemento con jQuery, il passaggio tra il valore di default (static per divs), fixed e absolute. Avrai anche bisogno di un elemento contenitore per il tuo elemento fisso. Infine, per evitare che l'elemento fisso vada oltre il piè di pagina, questo elemento contenitore non può essere il genitore del piè di pagina.

La parte javascript prevede il calcolo della distanza in pixel tra l'elemento fisso e la parte superiore del documento e il confronto con la posizione verticale corrente della barra di scorrimento relativamente all'oggetto della finestra (ovvero il numero di pixel sopra che sono nascosti dall'area visibile della pagina) ogni volta che l'utente scorre la pagina. Quando, scorrendo verso il basso, l'elemento fisso sta per scomparire sopra, cambiamo la sua posizione in fisso e restiamo in cima alla pagina.

Questo fa sì che l'elemento fisso vada oltre il piè di pagina quando si scorre verso il basso, soprattutto se la finestra del browser è piccola. Quindi, calcoleremo la distanza in pixel del piè di pagina dalla parte superiore del documento e la confronteremo con l'altezza dell'elemento fisso più la posizione verticale della barra di scorrimento: quando l'elemento fisso sta per andare oltre il piè di pagina, noi cambierà la sua posizione in assoluto e resterà in basso, appena sopra il piè di pagina.

Ecco un esempio generico.

La struttura 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> 

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

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

}); 

Answer 4

Questo ha funzionato per me -

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

Ora chiamano questa funzione come questa -

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

PS - Le funzioni Jquery vengono copiati da una risposta ad un altro domanda simile su StackOverflow, ma non funzionava completamente per me. Quindi l'ho modificato a queste funzioni, come sono mostrate qui. Penso che la posizione ecc. Attribuita alle tue div dipenderà da come sono strutturati i div, da chi sono i loro genitori e fratelli.

La funzione sopra riportata funziona quando entrambi i lati e gli ultimi sono dei fratelli diretti.

Answer 5

Ecco la soluzione @Sang ma senza 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>

Answer 6

sono andato con una modifica del 's risposta @ 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 
    }); 
}; 
};