0
146
ViewsHacer que los elementos se adhieran a la parte inferior de la ventana a menos que el pie de página sea visible
Tengo un pie de página fijo para mi sitio que se logró con lo siguiente.
html { position: relative; min-height:100%; } body { margin: 0 0 100px; text-align: center; } footer { position:absolute; left:0; bottom:0; height:100px; width:100%; background-color:red; }Esto funciona bien. Cuando el contenido es corto, el pie de página se pega al final:
Cuando el contenido es largo, el pie de página se empuja hacia abajo:
Ahora quiero colocar una imagen a cada lado de la página sobre el pie de página, así: (los cuadros grises representan las imágenes)
Cuando el contenido es largo y el pie de página se empuja hacia abajo, las imágenes también deberían moverse hacia abajo:
Sin embargo, cuando el contenido es tan largo que el pie de página está fuera de la ventana gráfica, las imágenes deben permanecer pegadas en la parte inferior de la pantalla, así:
He probado tantas combinaciones de posición y pantalla que he perdido la noción, por lo que realmente agradecería alguna orientación sobre si lo que estoy tratando de lograr es posible y, de ser así, qué se requiere. Estoy feliz de usar JQuery si eso fuera útil para lograr este objetivo.
2 answers
Answer question0
Usaría la extensión jQuery scrollToFixed . Es un código altamente efectivo y simplificado. Escribí un pequeño ejemplo para que lo veas:
Nota : esta extensión requiere un formato HTML adecuado, para eso, vea este ejemplo: https://pastebin.com/3gM7vvBR .
$(document).ready(function() { $('#footer').scrollToFixed( { bottom: 0, limit: $('#footer').offset().top, }); }); #footer { background:red; padding:10px; text-align:center; } body { padding:0; margin:0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollToFixed/1.0.8/jquery-scrolltofixed-min.js"></script> <div style="background:blue;height:700px;"></div> <div id="footer">Test footer</div> <div>Testing more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuff</div>Para obtener más información sobre la extensión, visite:
0
He ideado una solución en JQuery. Es bastante simple.
HTML:
<div id='leftimage' class='sideImage' style='left:0px;'> <img src='playleft.png' style='width:100%;'> </div> <div id='rightimage' class='sideImage' style='right:0px;' <img src='playright.png' style='width:100%;'> </div> <footer id='footer'>Footer content here</footer>CSS:
.sideImage { position:fixed; bottom:100px; width:275px; }JQuery:
$(document).scroll(function(){ repositionSideImages(); }); $( window ).resize(function() { repositionSideImages(); }); $(document).ready(function() { repositionSideImages(); }); function repositionSideImages() { var footer = $("#footer"); var footerTop = $(footer).offset().top; var scrollTop = $(document).scrollTop(); var windowHeight = $(window).height(); var windowBottom = scrollTop + windowHeight; repositionImage($("#leftimage"), windowBottom, footerTop, footer.height()); repositionImage($("#rightimage"), windowBottom, footerTop, footer.height()); } function repositionImage(image, windowBottom, footerTop, footerHeight) { if (windowBottom >= footerTop) { $(image).css({"position":"absolute", "bottom":footerHeight}); } else { $(image).css({"position":"fixed", "bottom":"0px"}); } }Es bastante simple en realidad. Cuando el documento se carga, se desplaza o se cambia el tamaño de la ventana, se calcula la posición inferior de la ventana. Si este punto está más abajo que la parte superior del pie de página, entonces [parte de] el pie de página está dentro de la ventana gráfica y las imágenes se establecen en una posición absoluta con la parte inferior establecida en la altura del pie de página, por lo que parece que se adhieren al pie de página. . De lo contrario, si el punto inferior de la ventana está por encima de la parte superior del pie de página, entonces el pie de página no está dentro de la ventana gráfica y las imágenes se establecen en una posición fija para que floten en la parte inferior de la pantalla.
Es muy sencillo, ya que no hay reposicionamiento de las imágenes por píxel, solo se intercambian su posición y los atributos inferiores cuando el pie de página cruza el límite de la parte inferior de la ventana.
Esto debería ser tan cruzado como el resto de JQuery, ya que no usa nada mágico.