Как заставить div плавать и прокручивать центр страницы? - PullRequest
Новая
       13

Как заставить div плавать и прокручивать центр страницы?

0 голосов
/ 29 апреля 2010

Итак, я работаю над приложением Facebook FBML. То, что я хочу, просто. Просто поместите показы Div в центр страницы и прокрутите страницу. то есть всегда в центре.

Было бы легко с обычным JS. Я просто использую страницу YOffset

Однако в Facebook, использующем FBJS, я не уверен, что мне следует использовать. Он не имеет getPageYOffset () .. и я попытался getScrollTop () .. это не совсем правильно.

Итак, кто-нибудь знает, как?

Ответы [ 3 ]

1 голос
/ 29 апреля 2010

Вы когда-нибудь видели что-то подобное на FB раньше? Мне кажется, что FBJS вызывает у вас проблему с отсутствием опций API.

Один из способов сделать это в обычном JS - это получить положение ползунков, как правого, так и нижнего, а также весь размер экрана, а затем определить, где центр видимого окна основан на полном размере кадра, и ползунок смещается.

Все эти переменные должны быть определены или извлечены с помощью javascript, чтобы вы могли захватывать и манипулировать ими, а затем он просто обновляет значения css в div, чтобы переместить окно в правильное местоположение. Затем вы можете опрашивать состояние ползунков окна или отслеживать их событие и извлекать их положение по мере их обновления, чтобы пересчитать центр окна.

Если у FBJS нет средств для определения размера окна или положения ползунка, у вас возникнут гораздо более серьезные проблемы.

0 голосов
/ 29 апреля 2010

Как насчет использования вызова Facebook myDiv.getAbsoluteTop()? Это не удержит объект в фиксированном состоянии, но, по крайней мере, начнется в правильном положении.

Еще одна идея - вы можете сгенерировать изображение и установить изображение в качестве фона, который, я думаю, вы можете оставить неизменным. Хотя это зависит от того, что вы ищете.

0 голосов
/ 29 апреля 2010

Использовать CSS 

#myDiv {
    /* Keep position fixed (scroll invariant) */
    position: fixed;

    /* Center */
    left: 50%;
    top: 50%;

    /* Set width and margin to account for half of width */
    width: 200px;
    margin-left: -100px;

    /* Set height and margin to account for half of height */
    height: 100px;
    margin-top: -50px;
}

Первые 3 строки будут центрировать верхний левый угол страницы. Следующие 4 строки устанавливают ширину, а затем сдвигают div назад и вверх, чтобы центр был в центре.

Больше информации от w3Schools о позиции .

...