Если вы прокрутите прокрутку вверх до вершины экрана,

У меня есть div, который при первой загрузке моей страницы составляет около 100 пикселей сверху (для этой страницы есть несколько кнопок и т.д.).

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

Visualization - xxxxx is the div:

Default (page load)          User vertically scrolled well past it
---------                    ---------
|       |                    |xxxxxxx| < after div reaches top of screen when
|xxxxxxx|                    |       |   page is scrolled vertically, it stays
|       |                    |       |   there
---------                    ---------

Ответы

Ответ 1

Фокус в том, что вы должны установить его как позицию: исправлено, но только после прокрутки пользователя.

Это делается с помощью чего-то вроде этого, прикрепляя обработчик к событию window.scroll

   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });

Это просто добавляет класс sticky CSS, когда страница прокручивается мимо него и удаляет класс при его резервном копировании.

И класс CSS выглядит так:

  #the-sticky-div.sticky {
     position: fixed;
     top: 0;
  }

EDIT - измененный код для кэширования объектов jQuery, быстрее.

Ответ 2

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

Полученный из кода viixii.com использует, я использовал это:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top)
        $('#sticky-element').addClass('sticky');
    else
        $('#sticky-element').removeClass('sticky');
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

Таким образом, функция вызывается только после достижения липкой привязки и, следовательно, не будет удалять и добавлять класс ".sticky" для каждого события прокрутки.

Теперь он добавляет липкий класс, когда липкий якорь достигает вершины и удаляет его, как только липкий якорь возвращается в поле зрения.

Просто поместите пустой div с классом, действующим как якорь над элементом, который вы хотите исправлять.

Так же:

<div id="sticky-anchor"></div>
<div id="sticky-element">Your sticky content</div>

Все кредиты для кода отправляются viixii.com

Ответ 3

Вы должны попробовать плагин jQuery для путевых точек.

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

Я думаю, что он делает именно то, что вы хотите, и без мерцания. Из памяти, однако, я не думаю, что это сработало хорошо в Mobile Safari (YMMV).

Хорошим примером этого было недавно в New York Times:

http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html

График на странице не прокручивается в верхней части страницы.

Ответ 4

Сегодня был предыдущий вопрос (нет ответов), который дал хороший пример этого функциональность. Вы можете проверить соответствующий исходный код для специфики (поиск "панели инструментов" ), но в основном они используют комбинацию решения webdestroya и немного JavaScript:

Загрузка страницы и элемент - позиция: статическая
В режиме прокрутки позиция измеряется, и если элемент находится в позиции: статический, и он отключен от страницы, тогда элемент перевернут в положение: зафиксировано.

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

Ответ 5

Я создал для этого плагин jQuery. Хотелось бы получить некоторые отзывы, поскольку это мой первый. https://github.com/dubroe/sticky-div

Ответ 6

Используйте position:fixed; и установите top:0;left:0;right:0;height:100px;, и вы должны иметь его "придерживаться" в верхней части страницы.

<div style="position:fixed;top:0;left:0;right:0;height:100px;">Some buttons</div>