tablas - recorrer tabla javascript

Encabezado pegajoso después de desplazarse hacia abajo

Question

Vi este encabezado fijo en este sitio web: http://dunked.com/ (ya no está activo, ver el sitio archivado )

Cuando se desplaza hacia abajo, el encabezado fijo desciende desde la parte superior.

Miré el código, pero parece realmente complicado. Solo entiendo esto: el encabezado normal se clonó con JS y cuando se desplaza hacia abajo, la página se anima desde arriba.

Answer 1

Agregue debouncing, por eficiencia http://davidwalsh.name/javascript-debounce-function

Answer 2

Aquí hay un violín de JS http://jsfiddle.net/ke9kW/1/

Como dicen los demás, establezca el encabezado en fijo y comience con la visualización: ninguno

entonces jQuery

$(window).scroll(function () {
if ( $(this).scrollTop() > 200 && !$(''header'').hasClass(''open'') ) {
$(''header'').addClass(''open'');
$(''header'').slideDown();
} else if ( $(this).scrollTop() <= 200 ) {
$(''header'').removeClass(''open'');
$(''header'').slideUp();
}
});

donde 200 es la altura en píxeles que le gustaría que se mueva hacia abajo en. La adición de la clase abierta es permitirnos ejecutar un elseif en lugar de otro, así que parte del código no se ejecuta innecesariamente en todos los controles, ahorre un poco de memoria

Answer 3

Aquí hay una lista de los complementos de jQuery que ayudarán a lograr un efecto similar: http://jquery-plugins.net/tag/sticky-scroll

Answer 4

Esto no estaba funcionando para mí en Firefox.

Agregamos un condicional en función de si el código coloca el desbordamiento en el nivel html. Ver Animate scrollTop no funciona en firefox .

 var $header = $("#header #menu-wrap-left"),
$clone = $header.before($header.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = Array();
fromTop["body"] = $("body").scrollTop();
fromTop["html"] = $("body,html").scrollTop();
if (fromTop["body"])
$(''body'').toggleClass("down", (fromTop["body"] > 650));
if (fromTop["html"])
$(''body,html'').toggleClass("down", (fromTop["html"] > 650));
});

Answer 5

Sugiero usar sticky js. Es la mejor opción que he visto. nada que hacer, solo este anuncio en ti

 https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js

y use el siguiente código:

<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
</script>

Su git repo: https://github.com/garand/sticky

Answer 6

Una solución similar utilizando jquery sería:

$(window).scroll(function () {
$(''.header'').css(''position'',''fixed'');
});

Esto convierte el encabezado en un elemento de posición fija inmediatamente en el desplazamiento

Answer 7

Usé la función jQuery .scroll () para rastrear el evento del valor de desplazamiento de la barra de herramientas usando scrollTop. Luego utilicé un condicional para determinar si era mayor que el valor de lo que quería reemplazar. En el siguiente ejemplo fue "Resultados". Si el valor era verdadero, entonces la etiqueta de resultados agregó una clase ''fixedSimilarLabel'' y los nuevos estilos se tuvieron en cuenta.

 $(''.toolbar'').scroll(function (e) {
//console.info(e.currentTarget.scrollTop);
if (e.currentTarget.scrollTop >= 130) {
$(''.results-label'').addClass(''fixedSimilarLabel'');
}
else {
$(''.results-label'').removeClass(''fixedSimilarLabel'');
}
});

http://codepen.io/franklynroth/pen/pjEzeK

Answer 8

css:

header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
}

JS:

$(window).scroll(function() {
if ($(this).scrollTop() > 100){
$(''header'').addClass("sticky");
}
else{
$(''header'').removeClass("sticky");
}
});

Answer 9

la parte inferior de la ventana se desplaza hacia la parte superior usando jquery.

 <script>
var lastScroll = 0;
$(document).ready(function($) {
$(window).scroll(function(){
setTimeout(function() {
var scroll = $(window).scrollTop();
if (scroll > lastScroll) {
$("header").removeClass("menu-sticky");
}
if (scroll == 0) {
$("header").removeClass("menu-sticky");
}
else if (scroll < lastScroll - 5) {
$("header").addClass("menu-sticky");
}
lastScroll = scroll;
},0);
});
});
</script>

Answer 10

Aquí hay un comienzo . Básicamente, copiamos el encabezado al cargar, y luego verificamos (usando .scrollTop() o window.scrollY ) para ver cuándo el usuario se desplaza más allá de un punto (por ejemplo, 200 píxeles). Luego simplemente cambiamos una clase (en este caso .down ) que mueve el original a la vista.

Por último, todo lo que tenemos que hacer es aplicar una transition: top 0.2s ease-in a nuestro clon, de modo que cuando está en el estado .down se deslice a la vista. Dunked lo hace mejor, pero con un poco de tiempo de juego es fácil de configurar

CSS

header {
position: relative;
width: 100%;
height: 60px;
}
header.clone {
position: fixed;
top: -65px;
left: 0;
right: 0;
z-index: 999;
transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
}
body.down header.clone {
top: 0;
}

ya sea Vanilla JS (polyfill según sea necesario)

var sticky = {
sticky_after: 200,
init: function() {
this.header = document.getElementsByTagName("header")[0];
this.clone = this.header.cloneNode(true);
this.clone.classList.add("clone");
this.header.insertBefore(this.clone);
this.scroll();
this.events();
},
scroll: function() {
if(window.scrollY > this.sticky_after) {
document.body.classList.add("down");
}
else {
document.body.classList.remove("down");
}
},
events: function() {
window.addEventListener("scroll", this.scroll.bind(this));
}
};
document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

o jQuery

$(document).ready(function() {
var $header = $("header"),
$clone = $header.before($header.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $("body").scrollTop();
$(''body'').toggleClass("down", (fromTop > 200));
});
});

Reflexiones mas nuevas

Mientras que lo anterior responde a la pregunta original del OP de "¿Cómo logra Dunked lograr este efecto?" , Yo no recomendaría este enfoque. Para empezar, copiar la navegación superior completa puede ser bastante costoso, y no hay ninguna razón real por la que no podamos usar el original (con un poco de trabajo).

Además, Paul Irish y otros, han escrito sobre cómo animar con translate() es mejor que animar con top . No solo es más eficaz, sino que también significa que no necesita saber la altura exacta de su elemento. La solución anterior se modificaría con lo siguiente (Ver JSFiddle) :

header.clone {
position: fixed;
top: 0;
left: 0;
right: 0;
transform: translateY(-100%);
transition: 0.2s transform cubic-bezier(.3,.73,.3,.74);
}
body.down header.clone {
transform: translateY(0);
}

El único inconveniente de usar transformaciones es que, si bien el soporte del navegador es bastante bueno , es probable que desee agregar versiones con prefijo de proveedor para maximizar la compatibilidad.