¿Qué quiero lograr? Quiero eliminar un div que ya no es visible (para el usuario, no el atributo css) en la pantalla porque dejé que el html y el cuerpo se desplazaran a un div con jquery (scrollTop). Ahora quiero eliminar el div que estaba visible antes de desplazarme hacia abajo con jquery.

Editar: después de eliminar el div .header, el # principio debería ser la parte superior de la página y el div .header debería eliminarse para siempre.

¿Cuál es el problema? Después de desplazarme hacia abajo y eliminar el div con la siguiente línea de código: $('.header').css('display','none'); la posición de desplazamiento cambia.

Código para desplazarse hacia abajo y eliminar el div.

function scrollToBegining(){
        $('html, body').animate({
            scrollTop: $("#begining").offset().top
        }, 750);

        setTimeout(function(){
            $('.header').css('display','none');
        },750);

    }

Problema visualizado: GIF del problema (ver para comprender mejor)

0
S A D B O Y S 10 ene. 2017 a las 22:51

4 respuestas

La mejor respuesta

Esto es extraño, pero creo que una mejor opción es slideUp el div en lugar de desplazarse:

function scrollToBegining(){
    $('.header').slideUp(750);
}

Obviamente, cambie el nombre de la función ya que ya no se desplaza.

1
Serg Chernata 10 ene. 2017 a las 19:55
visibility: hidden 

Es lo que está buscando, pero otra solución que uso con este tipo de problema es en lugar de desplazarse hacia abajo a su segundo div, hacer que el div inicial reduzca su altura en una animación uniforme hasta que sea 0. Esto evita el extraño problema de desplazamiento estremecedor estas experimentando

0
Sir Pat 10 ene. 2017 a las 19:58
document.querySelector('#header h1').addEventListener('click', closeHeader)
function closeHeader(){
	document.querySelector('#header').classList.add("hidden");
}
#header {
  height: 300px;
  width: 100%;
  background: red;
  text-align: center;
}

#content {
  height: 1000px;
  width: 100%;
  background: yellow;
  text-align: center;
}

.hidden {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
<div id="header">
  <h1>
    HEADER
  </h1>
</div>
<div id="content">
  CONTENT
</div>
0
DomeTune 11 ene. 2017 a las 08:00

Puede usar visibility: hidden para ocultar el div pero reservar su espacio. Además, a veces la posición de desplazamiento debe cambiarse cuando usa display: none.

0
Wais Kamal 10 ene. 2017 a las 19:53