Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.08.2013, 00:11
Новичок на форуме
Отправить личное сообщение для deathguru Посмотреть профиль Найти все сообщения от deathguru
 
Регистрация: 21.08.2013
Сообщений: 8

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

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

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

Последний раз редактировалось deathguru, 21.08.2013 в 00:16.
Ответить с цитированием
  #2 (permalink)  
Старый 21.08.2013, 00:15
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от deathguru
словно свойство position имеет значение fixed
Так ты так и пропиши - position:fixed.
Сообщение от deathguru
Как сделать, чтобы при прокрутке он оставался на месте
Никак. Все равно при прокрутке дергаться будет.
Ответить с цитированием
  #3 (permalink)  
Старый 21.08.2013, 00:19
Новичок на форуме
Отправить личное сообщение для deathguru Посмотреть профиль Найти все сообщения от deathguru
 
Регистрация: 21.08.2013
Сообщений: 8

Сообщение от danik.js Посмотреть сообщение
Так ты так и пропиши - position:fixed.

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

Я хочу сделать "перетекающие" блоки, как на вышеуказанном сайте. там ведь это работает.
Ответить с цитированием
  #4 (permalink)  
Старый 21.08.2013, 00:22
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от deathguru
Необходимо для создания эффекта прокрутки, как на этом сайте.
Типичный пример того как не надо делать. В хроме колесо нихрена не прокручивает страницу. Словно буксует почти на месте. А в скроллбар фиг попадешь - нужно под микроскопом целиться.
Из-за таких вот недочетов сайт превращается в убогое гавно.
Ответить с цитированием
  #5 (permalink)  
Старый 21.08.2013, 00:24
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Так там прокручивается не вся страница, а только блок с фотками. Неподвижные элементы как бы сами по себе неподвижны, без всяких скриптов и стилей, ибо их никто и не прокручивает.
Ответить с цитированием
  #6 (permalink)  
Старый 21.08.2013, 11:10
Новичок на форуме
Отправить личное сообщение для deathguru Посмотреть профиль Найти все сообщения от deathguru
 
Регистрация: 21.08.2013
Сообщений: 8

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

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

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

Последний раз редактировалось deathguru, 21.08.2013 в 11:21.
Ответить с цитированием
  #7 (permalink)  
Старый 21.08.2013, 11:19
Новичок на форуме
Отправить личное сообщение для deathguru Посмотреть профиль Найти все сообщения от deathguru
 
Регистрация: 21.08.2013
Сообщений: 8

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

Подключен: 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 - потому и пришел сюда за помощью.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
как обратиться к items элемента из другого элемента и изменить его? Krepkii ExtJS 2 12.02.2013 14:53
Позиция элемента карусели Bogdan Элементы интерфейса 9 01.08.2012 11:11
Абсолютная позиция элемента на странице Ponomareva_AS Общие вопросы Javascript 2 16.01.2012 18:35
Позиция элемента при Draggable bayrach jQuery 1 11.04.2011 11:19