Я пытаюсь сделать так, чтобы несколько изображений прилипали к верхней части моей страницы, накладываясь друг на друга, как только они прокручивались. Очень хороший пример этого один.
То, что у меня есть сейчас, это 3 div, которые через JS-скрипт всегда имеют высоту экрана/ширину пользователя. Внутри этих divs находятся изображения.
<div id="part1">
<div class="row">
<div class="twelve columns">
<img src="img/part1.png">
</div><!-- .twelve columns -->
</div><!-- .row -->
</div><!-- part1 -->
<div id="part2">
<div class="row">
<div class="twelve columns">
<img src="img/part2.png">
</div><!-- .twelve columns -->
</div><!-- .row -->
</div><!-- part2 -->
<div id="part3">
<div class="row">
<div class="twelve columns">
<img src="img/part3.png">
</div><!-- .twelve columns -->
</div><!-- .row -->
</div><!-- part3 -->
#part1, #part2, #part3 { width:100%; height:100%; }
#part1 { z-index:1; }
#part2 { z-index:2; }
#part3 { z-index:3; }
.stick { position:fixed; top:0; margin:0 auto; }
Я играл с наиболее найденными функциями, такими как эта:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#part1_anchor').offset().top;
if (window_top > div_top) {
$('#part1').addClass('stick');
} else {
$('#part1').removeClass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
Но это не дает мне желаемого результата, плюс не позволяет мне определять несколько div-ов для этой функции. У меня заканчиваются идеи, и любая помощь действительно ценится.
Исправлена проблема с этим ярким сценарием