Fermare la posizione fissa al piè di pagina

Sto cercando una soluzione al famoso problema di fermare un object fisso in fondo alla pagina.

Fondamentalmente ho una casella “share” fissa nell’angolo in basso a sinistra dello schermo e non voglio che scorra oltre il piè di pagina, quindi ho bisogno che si fermi 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 riuscivo a far funzionare la mia situazione.

Ecco l’html per la casella di condivisione:

  
...
...
...

… 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 footer è #footer e non ha un’altezza fissa, se questo fa alcuna differenza.

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

Dimostrazione dal vivo

per prima cosa, verificarne l’offset ogni volta che si scorre la pagina

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

nota che il genitore di #social-float dovrebbe essere fratello del footer

   

in bocca al lupo 🙂

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 effettuato lo scrolling oltre questo, 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); } }); 

Mi sono imbattuto in questo stesso problema di recente, pubblicato la mia soluzione anche qui: Prevenire l’elemento da visualizzare in cima al piè di pagina quando si usa la posizione: fissa

È ansible ottenere una soluzione sfruttando la proprietà position dell’elemento con jQuery, passando tra il valore predefinito ( 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’object 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 sparire 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 scorriamo verso il basso, specialmente se la finestra del browser è piccola. Pertanto, 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, lo faremo cambia la sua posizione in assoluto e resta in basso, appena sopra il piè di pagina.

Ecco un esempio generico.

La struttura HTML:

 
This is fixed
Main content here

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

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

Questo ha funzionato per me –

HTML –

 

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 chiama questa funzione in questo modo -

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

PS - Le funzioni di Jquery sono copiate da una risposta ad un'altra 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 di cui sopra funziona quando entrambi i sideNote e footer-wraps sono fratelli diretti.

Sono andato con una modifica della risposta di @ 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 }); }; };