Desplazamiento suave encabezado con posición fija

Cómo crear desplazamiento suave cuando me cambio de posición fija. Yo intente agregar la animación, pero no funciona. Mejor uso de animación jquery();

JS:

$(window).scroll(function() {
  var sticky = $('.mobile-menu'),
    scroll = $(window).scrollTop();

  if (scroll >= 40) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

CSS:

header {
  padding: 20px 40px;
  background: gray;
  width: 100%;
  -webkit-transition: position 10s;
  -moz-transition: position 10s;
  -ms-transition: position 10s;
  -o-transition: position 10s;
  transition: position 10s;
}
section {
  height: 150vh;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="mobile-menu">Text here</header>
<section>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
  gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>

  • Usted no puede la transición de la posición de la propiedad.
  • Si usted está buscando una manera simple y efectiva de la aplicación de una capa pegajosa de cabecera me gustaría sugerir el uso de Bootstrap. Es fácil para ponerse en marcha y todo el trabajo pesado ya está hecho para usted. Siga la guía de inicio rápido v4-alpha.getbootstrap.com/getting-started/introduction/… Añadir el nombre de la clase «navbar-fixed-top» a tu nav y eso es todo. Desde allí se tiene una similar pegajosa nav con sencillo el arranque.

2 Kommentare

  1. 12

    Puede utilizar @keyframes para agregar algunos efectos de transición para el desplazamiento.

    JS:

    $(window).scroll(function() {
      var sticky = $('.mobile-menu'),
        scroll = $(window).scrollTop();
       
      if (scroll >= 40) { 
        sticky.addClass('fixed'); }
      else { 
       sticky.removeClass('fixed');
    
    }
    });

    CSS:

    header {
      padding: 20px 40px;
      background: gray;
      width: 100%;
      
      -webkit-transition: all 0.5s ease;
      -moz-transition: position 10s;
      -ms-transition: position 10s;
      -o-transition: position 10s;
      transition: all 0.5s ease;
    }
    section {
      height: 150vh;
    }
    
    
    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      animation: smoothScroll 1s forwards;
    }
    @keyframes smoothScroll {
    	0% {
    		transform: translateY(-40px);
    	}
    	100% {
    		transform: translateY(0px);
    	}
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <header class="mobile-menu">Text here</header>
    <section>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
      gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>

    • Cuando estamos de vuelta, es wrired ahora.
  2. 2

    EDITADO basado en el comentario.

    Si cambia position a fixed mientras se desplaza, va a generar no deseado salto de comportamiento.

    Su mejor apuesta sería la de evitar que el posicionamiento durante el desplazamiento, ajuste de fixed después de 40px o desde el inicio es casi el mismo, así que te sugiero que quitar esta parte de tu jQuery, y hacer que su header fixed desde el principio:

    //if (scroll >= 40) sticky.addClass('fixed');
    //else sticky.removeClass('fixed');

    Siguiente fragmento:

    JS:

    $(window).scroll(function() {
      var sticky = $('.mobile-menu'),
        scroll = $(window).scrollTop();
    });

    CSS:

    body {
      position: relative;
    }
    header {
      padding: 20px 40px;
      background: gray;
      width: 100%;
      -webkit-transition: position 10s;
      -moz-transition: position 10s;
      -ms-transition: position 10s;
      -o-transition: position 10s;
      transition: position 10s;
    }
    section {
      height: 150vh;
      position: relative;
      top: 60px;
    }
    .fixed {
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <header class="mobile-menu fixed">Text here</header>
    <section>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
      gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>

    • No puedo añadir el margen superior de la sección, porque tengo un montón de página con los diferentes contenidos.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...