Estoy tratando de crear un botón "ver también" que se encuentra en la parte inferior de la página. Cuando el usuario llega al final y decide volver a desplazarse hacia arriba, quiero que se pegue en la parte inferior de la ventana gráfica.

He estado intentando con position:sticky pero ya está pegado en la parte inferior de la ventana cuando la página se acaba de cargar. Solo quiero esto después de un desplazamiento completo hacia abajo.

¿Alguna pista? Gracias por adelantado.

0
suzypubes 28 abr. 2020 a las 20:12

4 respuestas

La mejor respuesta

Revuelto todo junto y esto está funcionando ahora:

```window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
document.getElementById("see-also").classList.add("sticky");
}};```

Gracias a todas

0
suzypubes 28 abr. 2020 a las 19:23

Este es un ejemplo con javascript (vea el resultado botón fijo en la parte superior de desplazamiento

const DIRECTION_BOTTOM = 1;
const DIRECTION_TOP = 0;

let previousScroll = 0;
let direction = scrollY === 0 ? DIRECTION_BOTTOM : DIRECTION_TOP;

window.addEventListener('scroll', function(){
    const scrollY = window.scrollY;

    if(direction === DIRECTION_TOP && previousScroll < scrollY){
        direction = DIRECTION_BOTTOM;

        // remove sticky
        document.getElementById("sticky").classList.remove("show");
    }
    else if(direction === DIRECTION_BOTTOM && previousScroll > scrollY ){
        direction = DIRECTION_TOP;

        // Add sticky 
        document.getElementById("sticky").classList.add("show");
    }

    previousScroll = scrollY;
})
2
Adrien Leloir 28 abr. 2020 a las 18:02

Puede crear esta funcionalidad con JQuery creando una función que calcula cuándo un elemento está en la ventana gráfica. Si el botón ingresa a la ventana gráfica, agregue una clase que haga que la posición del elemento sea pegajosa. Hay diferentes formas de abordar este problema, pero una solución es algo como esto:

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};
  

  
 $(window).on("scroll", function() {
    if($('#button').isInViewport()) {
        $('#button').addClass('sticky');
    }
 });
body {
  text-align: center;
}

.button {
  padding: 6px 12px;
}

.div {
  width: 100%;
  height: 250px;
  color: #fff;
}

.div1 {
  background: blue;
}
.div2 {
  background: red;
 }
 .div3 {
  background: purple;
 }
 
 .sticky {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  height: 100%;
  bottom: 5px;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="div div1">Filler div 1</div>
<div class="div div2">Filler div 2</div>
<div class="div div3">Filler div 3</div>

<button type="button" class="button" id="button">See Also</button>
0
Xenvi 28 abr. 2020 a las 18:06

Vaya a CSS y agregue al pie de página z-index: -1; para que cuando la página esté cargada el pie de página no tenga privilegio de posicionamiento de capa, luego, cuando termine el desplazamiento hacia abajo, vaya a JavaScript y cámbielo a z-index: 1000 para que tenga privilegio de posicionamiento de capa absoluto

Y si fuera usted, también agregaría transition y tal vez algunos translateX para que cuando aparezca el pie de página haya un poco de efecto de animación

-1
tony 28 abr. 2020 a las 18:07