javascript - top - Detener la posición fija en el pie de página
position fixed scroll vertical (6)
Estoy buscando una solución al popular problema de detener un objeto fijo al pie de la página.
Básicamente, tengo un cuadro fijo de "compartir" en la esquina inferior izquierda de la pantalla y no quiero que se desplace sobre el pie de página, por lo que necesito detenerlo unos 10px encima del pie de página.
He visto otras preguntas aquí y otras. La demo más cercana / más simple que pude encontrar es http://jsfiddle.net/bryanjamesross/VtPcm/ pero no pude hacer que funcionara con mi situación.
Aquí está el html para el cuadro de compartir:
<div id="social-float">
<div class="sf-twitter">
...
</div>
<div class="sf-facebook">
...
</div>
<div class="sf-plusone">
...
</div>
</div>
... y el 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;
}
El pie de página es #footer y no tiene una altura fija, si eso hace alguna diferencia.
Si alguien pudiera ayudarme a crear una solución jQuery simple para esto, ¡lo agradecería mucho!
Acabo de resolver este problema en un sitio en el que estoy trabajando, y pensé que lo compartiría con la esperanza de que ayude a alguien.
Mi solución toma la distancia desde el pie de página hasta la parte superior de la página: si el usuario se desplazó más allá de esto, tira de la barra lateral hacia arriba con un margen 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);
}
});
Aquí está la solución @Sang pero sin 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>
Esto funcionó para mí -
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'');
}
});
}
Ahora llama a esta función así:
$(document).ready(function() {
setSideNotePos();
});
PD: Las funciones de Jquery se copian de una respuesta a otra pregunta similar en , pero no me funcionaba por completo. Entonces lo modifiqué a estas funciones, como se muestran aquí. Creo que los atributos de posición de tus divs dependerán de cómo estén estructurados los divs, quiénes son sus padres y hermanos.
La función anterior funciona cuando ambos sideNote y footer-wraps son hermanos directos.
Fui con una modificación de la respuesta 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
});
};
};
Me encontré con este mismo problema recientemente, publiqué mi solución también aquí: Evitando que el elemento se muestre en la parte superior del pie de página cuando se usa la posición: fijo
Puede lograr una solución aprovechando la propiedad de position del elemento con jQuery, cambiando entre el valor predeterminado ( static para divs ), fixed y absolute . También necesitarás un elemento contenedor para tu elemento fijo. Finalmente, para evitar que el elemento fijo pase por el pie de página, este elemento contenedor no puede ser el elemento primario del pie de página.
La parte javascript implica calcular la distancia en píxeles entre su elemento fijo y la parte superior del documento, y compararlo con la posición vertical actual de la barra de desplazamiento en relación con el objeto ventana (es decir, el número de píxeles que están ocultos del área visible) de la página) cada vez que el usuario se desplaza por la página. Cuando, al desplazarse hacia abajo, el elemento fijo está a punto de desaparecer arriba, cambiamos su posición a fija y se pega sobre la parte superior de la página.
Esto hace que el elemento fijo vaya más allá del pie de página cuando nos desplazamos hacia la parte inferior, especialmente si la ventana del navegador es pequeña. Por lo tanto, calcularemos la distancia en píxeles del pie de página desde la parte superior del documento y lo compararemos con la altura del elemento fijo más la posición vertical de la barra de desplazamiento: cuando el elemento fijo esté por sobrepasar el pie de página, lo haremos cambie su posición a absoluta y pegue en la parte inferior, justo sobre el pie de página.
Aquí hay un ejemplo genérico.
La estructura 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>
El 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 */
}
El 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'');
}
});
primero, verifica su desplazamiento cada vez que te desplazas por la página
$(document).scroll(function() {
checkOffset();
});
y hacer su posición absoluta si ha sido derribada por debajo de 10px antes del pie de página.
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
}
Observe que #social-float padre de #social-float debe ser hermano del pie de página
<div class="social-float-parent">
<div id="social-float">
something...
</div>
</div>
<div id="footer">
</div>
buena suerte :)