Этот вопрос может показаться глупым, но он разбивает мне голову. Я хотел бы сделать своего рода вертикальное представление прокрутки, состоящее из разных слайдов; эффект должен быть «похож» на этот сайт:Как получить текущий видимый слайд в вертикальной области прокрутки с помощью jQuery
Я создал unorderd список, содержащий другой слайд:
<div id="main">
<div id="content">
<ul id="bg">
<li id="slide1"> <!-- content --></li>
<li id="slide2"> <!-- content --></li>
<!-- and so on -->
</ul>
</div>
</div>
Я дал position:fixed по центру страницы для всех слайдов (пока есть изображения) и другого z-индекса для создания слайдов и изображений. Что-то вроде
----- slide 1
§§§ image 2
----- slide 2
§§§ image 3
---- slide 3
и так далее
Это, конечно, работает только в смысле: слайд, при прокрутке, раскрывает следующий слайд, но предыдущие изображения всегда видны не все удаляются из потока из-за к их фиксированному позиционированию.
Так что я подумал, давая изображения position:absolute (и дать position:relative к <li>), но это не делает их «липкими» в центре страницы, пока новые слайды не прибывает и покрывают ее, они, конечно, естественно, следуйте за их родителями <li> в своем движении.
Я полностью потерял это, а также о том, как получить текущий видимый список в окне. Я просмотрел все встроенные функции, предоставляемые jQuery: scrollTop(), offset().top, position().top, я получил $(window).height(), высота 0 фиксируется, но все, что я получаю, являются «абсолютными» позициями элементов (я имею в виду, он не меняется со свитком), я не могу понять, как сказать, когда слайд находится на полпути по экрану, чтобы я мог что-то сделать (пока не знаю, что).
Уверен, что мне не хватает чего-то очевидного здесь. Я изучил код со связанного сайта, и хотя я могу понять почти все это, я до сих пор не могу понять, как он получает текущий слайд (кроме того, он работает по-другому, чем мой, поскольку он загружает анимированные gifs динамически и только для каждого слайда. В моем случае каждый слайд представляет собой контейнер с различными элементами, анимацию и т. д.).
Как получить, если, например, $('li#slide3') есть внутри? Как я могу решить проблему сложенными изображениями? Нужно ли устанавливать их как «фиксированные» динамически или пересчитывать при каждом прокрутке их позиции, чтобы сделать position:absolute? Для этой секунды мне все же нужно было бы получить позицию каждого элемента по сравнению с фиксированной точкой (я считаю, $(window).scrollTop(), которая до сих пор дает мне всегда 0 при прокрутке), но я не могу понять, как это сделать.
О, я использую метод jQuery scroll() для привязки прокрутки, так как у меня также есть список навигации, который позволяет вам перейти к желаемому слайду, и это объясняет это тоже.
Надеюсь, я ясно сказал об этом: изображения должны всегда оставаться в центре, а прокрутка слайдов должна покрывать их, и пока изображение покрывается, необходимо отображать и занять свое место, поэтому мне нужно чтобы понять, как получить позицию текущего элемента <li>, скажем, когда он находится на полпути через окно, и соответствующим образом установите предыдущее изображение.
Я рекомендую изменить тэг 'offset' на тег' parallax'. – arttronics