Использование JQuery Sticky Elements

Question

Я пытаюсь сделать классический Липкий Элемент в обратном порядке.

См. http://imakewebthings.com/jquery-waypoints/sticky-elements/ для примера типичного липкого опыта.

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

Answer 1

Следуя документации , это может быть достигнуто следующим образом:

$('#footer').waypoint(function(event, direction) {
    $('#footer-content').toggleClass('sticky', direction === 'up');
}, {
   offset: function() {
      return $.waypoints('viewportHeight') - $(this).outerHeight();
   }
});
​

Я присваиваю .sticky изначально #footer-content (в html).

См. скрипка .

Answer 2

вы можете изменить css, чтобы он соответствовал нижней части экрана, установив bottom : 0px для .top селектора класса

В настоящее время элемент фактически является частью нижнего колонтитула, поэтому добавить его будет нелегко, чтобы он прекратил прокрутку в определенной точке страницы.

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