Se vogliamo implementare un effetto parallax sugli elementi e non sugli sfondi jQuery può essere la soluzione.
Supponiamo di avere questa struttura ripetuta:
<section class="content">
<header class="content-header">...</header>
<!-- contenuto -->
</section>
Con questi stili CSS:
.content-header {
position: fixed;
background: #fff;
z-index: 10000;
}
Possiamo implementare il seguente codice jQuery:
$(function() {
$( ".content-header" ).each(function() {
var $header = $( this ),
$parent = $header.parent(),
parentTop = $parent.offset().top,
parentLeft = $parent.offset().left;
$header.css({
top: parentTop,
left: parentLeft
});
});
});