Agregue el efecto / transición del encabezado de desplazamiento con propiedades de posición - javascript, jquery, css, css3

Tengo un encabezado que position:absolute en la carga necesito mostrarlo fijo en un desplazamiento particular para que funcione ...

pero el problema es que la forma en que uso el efecto de encabezado (es decir, se muestra con retraso desde arriba) con position:fixed propiedad.

código:

CSS

.iaw-header {
position:absoulte
}

JS:

{
if (jQuery(window).scrollTop() >= 700) {
jQuery(".iaw-header").css("position","fixed");
});
}

Respuestas

1 para la respuesta № 1

HTML

<div id="header">
Header text here.
</div>

CSS

.header { position: absolute; }

JS

if (jQuery(window).scrollTop() >= 700) {
$("#header").css("top", "-300px");
$("#header").css("position", "fixed");
$("#header").animate({top: 0}, 1000);
} else {
$("#header").animate({top: "-300px"}, 1000, function () {
$("#header").css("top", 0);
$("#header").css("position", "absolute");
});
}

Entonces, cuando el sitio se carga (en CSS), el encabezado puede tener top: -300px;, y cuando el usuario se desplaza, usted cambia (o configura) la parte superior del encabezado a 0px, por lo que se desplaza hacia abajo desde la parte superior.

---

0 para la respuesta № 2

   $(window).scroll(function () {
var i = $(".iaw-header")
var h = i.outerHeight(true);
if ($(window).scrollTop() > h) {
if (!i.hasClass("fixed")) i.hide().addClass("fixed");
}
if ($(window).scrollTop() >= 400) {
i.slideDown("fast");
} else {
i.removeClass("fixed").show();
}
});

Agrega una clase en tu estilo:

.fixed {position: fixed;top:0; left:0;width: 100%; }

Tal vez, no sea el mejor código pero aún así puedes comenzar a construirlo y modificarlo para hacerlo mejor. Aquí está el enlace de Jsfiddle:http://jsfiddle.net/lotusgodkk/gxRC9/200/

---