¿Cómo arreglar la navegación suave fijada en Jquery?

Hola tengo esta suave navegación de desplazamiento fijo cuando el usuario se desplaza hacia el sitio.. Pero cuando la página sube y elimina la clase nav_fixed la parte del encabezado salta a través de ella .. Cómo puedo ajustar mi código de jquery que también permite el desplazamiento suave de la parte de encabezado cuando el usuario se desplaza hacia arriba. Como se puede ver en la muestra debajo del comportamiento de los saltos de cabecera y es una especie de fallo menor.

/* Fixed Header Parallax */
  var header_height = $('header').outerHeight(); //number of pixels before modifying styles

  $(window).bind('scroll', function () {
    if ($(window).scrollTop() > header_height) {
      $('header').addClass('nav_fixed');
      $('.dummyHeight').addClass('addHeight');
    } else {
      $('header').removeClass('nav_fixed');
      $('.dummyHeight').removeClass('addHeight');
    }
  });
.main {height:700px;}
.addHeight {
  height: 80px;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}
/* Header */
header {
  background: red;
  height: 80px;
  padding: 10px 40px;
  border-bottom: 1px solid #caccd0;
  position: relative;
  transition: all 0.3s linear;
}

.nav_fixed {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  top: 0;
  animation-name: fade-in;
  animation-duration: 1s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.addHeight {
  height: 80px;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}

nav ul li {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
nav ul li a {
  display: block;
  color: #232323;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  padding: 0 10px;
  line-height: 67px;
}




    Sample

Pregunta hecha hace 3 años, 4 meses, 29 días - Por codecrafty

3 Respuestas:

  • ¿Puede ser esto lo que necesitas? Avísame si necesitas algo más. He modificado script para quitar ese salto que estás diciendo. He quitado las clases cuando llegas a la cabecera desplegándose todo el camino.

    /* Fixed Header Parallax */
  var header_height = $('header').outerHeight(); //number of pixels before modifying styles
  var offset = $('header').offset();
  
  $(window).bind('scroll', function () {
  
  var scrollTop = $(window).scrollTop();
    if (scrollTop > header_height) {
      $('header').addClass('nav_fixed');
      $('.dummyHeight').addClass('addHeight');
    } else if(scrollTop == offset.top) {
      $('header').removeClass('nav_fixed');
      $('.dummyHeight').removeClass('addHeight');
    }
  });
    body{
  margin: 0;
}
.main {height:700px;}
.addHeight {
  height: 80px;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}
/* Header */
header {
  background: red;
  height: 80px;
  padding: 10px 40px;
  border-bottom: 1px solid #caccd0;
  position: relative;
  transition: all 0.3s linear;
}

.nav_fixed {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  top: 0;
  animation-name: fade-in;
  animation-duration: 1s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.addHeight {
  height: 80px;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}

nav ul li {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
nav ul li a {
  display: block;
  color: #232323;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  padding: 0 10px;
  line-height: 67px;
}
    html


Page Title







    

    Sample

    Respondida el Dec 16, 2020 a las 11:41 - por webweaverx

    Votos positivos: 0 | Votos negativos: 0

  • Para corregir el salto en la navegación fija al eliminar la clase nav_fixed, puedes agregar una animación de desvanecimiento al momento de quitar la clase. Puedes modificar tu código de jQuery de la siguiente manera:

    javascript
/ Fixed Header Parallax /
var header_height = $('header').outerHeight(); // número de píxeles antes de modificar los estilos

$(window).bind('scroll', function () {
  if ($(window).scrollTop() > header_height) {
    $('header').addClass('nav_fixed');
    $('.dummyHeight').addClass('addHeight');
  } else {
    // Añadir animación de desvanecimiento al quitar la clase nav_fixed
    $('header').addClass('fade-out').removeClass('nav_fixed');
    $('.dummyHeight').removeClass('addHeight');
    setTimeout(function() {
      $('header').removeClass('fade-out');
    }, 1000); // Duración de la animación, ajusta según necesario
  }
});

    Además, puedes agregar la clase CSS fade-out con la animación de desvanecimiento en tu código CSS:

    css
.fade-out {
  animation-name: fade-out;
  animation-duration: 1s;
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

    Con estos cambios, al eliminar la clase nav_fixed, el encabezado se desvanecerá en lugar de saltar, proporcionando una transición suave. Ajusta la duración de la animación según consideres necesario para lograr el efecto deseado.

    Respondida el Dec 17, 2020 a las 11:43 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para arreglar la navegación suave con desplazamiento fijo en jQuery cuando la clase nav_fixed se elimina, puedes usar el siguiente código actualizado:

    javascript
/ Fixed Header Parallax /
var header_height = $('header').outerHeight(); //number of pixels before modifying styles

$(window).bind('scroll', function () {
  if ($(window).scrollTop() > header_height) {
    $('header').addClass('nav_fixed');
    $('.dummyHeight').addClass('addHeight');
  } else {
    // Añadido: Desplazamiento suave hacia arriba
    $('header').removeClass('nav_fixed').animate({ top: "0px" }, 300);
    $('.dummyHeight').removeClass('addHeight');
  }
});

    Los cambios están en la línea que elimina la clase nav_fixed al desplazarse hacia arriba:

    javascript
$('header').removeClass('nav_fixed').animate({ top: "0px" }, 300);

    Hemos agregado una animación animate() para desplazar suavemente el encabezado hacia la parte superior de la página en 300 milisegundos. Esto eliminará el salto abrupto que estaba experimentando.

    Respondida el Dec 17, 2020 a las 11:54 - por Gemini

    Votos positivos: 0 | Votos negativos: 0