Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Позиция элемента (https://javascript.ru/forum/jquery/40816-poziciya-ehlementa.html)

deathguru 21.08.2013 00:11

Позиция элемента
 
Есть элемент
<div style="{position:absolute;}">Блаблабла</div>

Как сделать, чтобы при прокрутке он оставался на месте, словно свойство position имеет значение fixed? Думаю, необходимо изменять значение координату top при прокрутке, но каким образом? (пробовал решить через ScrollToTop, но не получилось).

Необходимо для создания эффекта прокрутки, как на этом сайте. Но там сделано с помощью плагина jscrollpane (пытался повторить, но не понял как реализовать. да и хотелось бы сделать проще, т.к. задача сделать всего 2 "переливающихся" картинки)

danik.js 21.08.2013 00:15

Цитата:

Сообщение от deathguru
словно свойство position имеет значение fixed

Так ты так и пропиши - position:fixed.
Цитата:

Сообщение от deathguru
Как сделать, чтобы при прокрутке он оставался на месте

Никак. Все равно при прокрутке дергаться будет.

deathguru 21.08.2013 00:19

Цитата:

Сообщение от danik.js (Сообщение 268470)
Так ты так и пропиши - position:fixed.

Никак. Все равно при прокрутке дергаться будет.

Надо сделать именно через position:absolute (т.к. при fixed значение родительского overflow:hidden не работает как надо. а правильно скрывает внутренности только с position:absolute);

Я хочу сделать "перетекающие" блоки, как на вышеуказанном сайте. там ведь это работает.

danik.js 21.08.2013 00:22

Цитата:

Сообщение от deathguru
Необходимо для создания эффекта прокрутки, как на этом сайте.

Типичный пример того как не надо делать. В хроме колесо нихрена не прокручивает страницу. Словно буксует почти на месте. А в скроллбар фиг попадешь - нужно под микроскопом целиться.
Из-за таких вот недочетов сайт превращается в убогое гавно.

danik.js 21.08.2013 00:24

Так там прокручивается не вся страница, а только блок с фотками. Неподвижные элементы как бы сами по себе неподвижны, без всяких скриптов и стилей, ибо их никто и не прокручивает.

deathguru 21.08.2013 11:10

Цитата:

Сообщение от danik.js (Сообщение 268476)
Типичный пример того как не надо делать. В хроме колесо нихрена не прокручивает страницу. Словно буксует почти на месте. А в скроллбар фиг попадешь - нужно под микроскопом целиться.
Из-за таких вот недочетов сайт превращается в убогое гавно.

я же не спрашиваю о том как надо делать сайты, а как нет, а прошу помощи в конкретной ситуации.

на этом сайте это сделано по средствам JQuery я уже даже написал каким плагином, ибо ковырял код. У круглых переливающихся плашек
{div style="top: n;"}
меняется динамически.

а свойством css position:fixed этого никак не добиться, потому что overflow:hidden родительского элемента в этом случае скрывает только нижнюю часть (и нормально НЕ работает, даже если я выставляю z-index: милиярд; у всех соседних элементов). ИМЕННО ПО ЭТОЙ причине надо делать через position:absolute.

deathguru 21.08.2013 11:19

Вот как это сделано на том сайте:

Подключен: http://www.borgo27.it/js/jquery.jscrollpane.min.js

Тут, видимо, подключается сам скрипт:
http://www.borgo27.it/js/views/all.js в строках, ориентировочно:
scrollpane.jScrollPane({
        showArrows: true,
        //autoReinitialise: true,
        //animateScroll: true,
        //animateDuration: 1000,
        //animateEase: 'easeInOutExpo',
        mouseWheelSpeed: 40
    });
    api = scrollpane.data('jsp');


    $(window).load(function () {
        api.reinitialise();
    });


Далее сам код изменения позиции круглых плашек тут:
http://www.borgo27.it/js/views/home.js

Думаю, вот в этих строках:
$("#scale1").css({ "marginTop": -(265 - (api.getContentPositionY() / 1)) });
$("#scale2").css({ "top": -intWindowCenter + (api.getContentPositionY() / 1) });


Все сделано при помощи плагина jscrollpane и значения getContentPositionY, которое высчитывает координату круглой плашки и меняет ее при прокрутке. По крайней мере я так думаю. Но я плохо дружу с JQuery - потому и пришел сюда за помощью.


Часовой пояс GMT +3, время: 20:16.