Как создать панель, которая остается сверху при прокрутке? - PullRequest
Новая
       0

Как создать панель, которая остается сверху при прокрутке?

1 голос
/ 29 сентября 2011

Я пытаюсь создать div, который остается фиксированным сверху, когда пользователь прокручивает вниз, а когда он прокручивает назад, возвращается в исходное положение.

Мне нужно то же поведение, которое предлагает 9gag -> http://9gag.com/gag/293756

Спасибо!

Ответы [ 3 ]

4 голосов
/ 29 сентября 2011

Используйте плагин Jquery Waypoints: http://imakewebthings.github.com/jquery-waypoints/

Чрезвычайно прост в реализации.

4 голосов
/ 29 сентября 2011

Выполните следующие действия:

  1. Создание обработчика событий прокрутки на $(window).
  2. В этом обработчике событий проверьте, прокручивается ли пользователь ниже вершины элемента, который вы всегда хотите видеть. Для этого можно использовать методы offest и scrollTop .
  3. Если да, установите элемент на position: fixed с помощью top: 0. Вам также может понадобиться настроить левый атрибут в зависимости от вашего макета.
  4. Если нет, установите элемент на position: static.
1 голос
/ 29 сентября 2011

Код, который создает точно такое же поведение, как 9gag.com:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- tags html, header, body, divs, anything -->

<div id="post-control-bar" class="spread-bar-wrap">
    <div class="spread-bar" style="width:600px">
        Facebook button, Twitter button, anything...
    </div>
</div>

<script type="text/javascript">
window.onscroll = function()
{
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 173 || self.pageYOffset > 173) {
            $('post-control-bar').style.position = 'fixed';
            $('post-control-bar').style.top = '0';
        } else if (document.documentElement.scrollTop < 173 || self.pageYOffset < 173) {
            $('post-control-bar').style.position = 'absolute';
            $('post-control-bar').style.top = '';
        }
    }
}
</script>

<!-- content, footer, anything -->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...