Автор Тема: Не получается настроить affix плагин  (Прочитано 326 раз)

31 Май 2019, 22:06:53
  • Пользователь
  • **
  • Сообщений: 71
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Никак не могу остановить действие плагина перед footer.
Всё вроде по инструкции сделал
Преста 1.6.1 дефолтный шаблон
<script>
// #myAffix - идентификатор элемента к которому необходимо
// добавить Affix
$('#sidebar').affix({
  // установка смещений с помощью параметра offset
  offset: {
    top: 100,
bottom: function () {
      // возвращает значение высоты
      // элемента веб-страницы с классом .footer
      return (this.bottom = $('.footer-container').outerHeight(true))
    }
  }
})
</script>

подскажите пожалуйста, что не так
01 Июнь 2019, 11:43:16
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 22125
  • Репутация: +25303/-1
  • Prestashop - просто и эффективно
    • Просмотр профиля
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!
03 Июнь 2019, 12:45:31
Ответ #2
  • Пользователь
  • **
  • Сообщений: 71
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Это стоит
Сам плагин работает.
DIV прилипает.
Но div накатывается на footer, а должен остановится перед .footer-container
03 Июнь 2019, 13:24:52
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 1808
  • Репутация: +49/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Можно использовать фиксированную величину, например 200px
offset: {
    top: 100,
    bottom: 200
Кроме этого необходимо прописать стили, нужно для того, чтобы когда affix блок будет достигал bottom он останавливался на заданной точке.
position: absolute;
03 Июнь 2019, 14:10:08
Ответ #4
  • Пользователь
  • **
  • Сообщений: 71
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Можно использовать фиксированную величину, например 200px
offset: {
    top: 100,
    bottom: 200
Кроме этого необходимо прописать стили, нужно для того, чтобы когда affix блок будет достигал bottom он останавливался на заданной точке.
position: absolute;

position:fixed задаёт сам плагин при начале прокрутки. При absolute блоки улетают в начало и не плавают. я Пробовал так
03 Июнь 2019, 15:15:59
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 1808
  • Репутация: +49/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Видел еще вот такое решение
var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').innerHeight();
$('#account-overview-container').affix({
    offset: {
        top: headerHeight,
        bottom: footerHeight
    }
}).on('affix.bs.affix', function () { // before affix
    $(this).css({
        /*'top': headerHeight,*/    // for fixed height
            'width': $(this).outerWidth()  // variable widths
    });
}).on('affix-bottom.bs.affix', function () { // before affix-bottom
    $(this).css('bottom', 'auto'); // THIS is what makes the jumping
});
03 Июнь 2019, 19:54:05
Ответ #6
  • Пользователь
  • **
  • Сообщений: 71
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Видел еще вот такое решение
var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').innerHeight();
$('#account-overview-container').affix({
    offset: {
        top: headerHeight,
        bottom: footerHeight
    }
}).on('affix.bs.affix', function () { // before affix
    $(this).css({
        /*'top': headerHeight,*/    // for fixed height
            'width': $(this).outerWidth()  // variable widths
    });
}).on('affix-bottom.bs.affix', function () { // before affix-bottom
    $(this).css('bottom', 'auto'); // THIS is what makes the jumping
});

Да останавливается, спасибо большое, однако потом резко плавающий div улетает на верх и больше не срабатывает.
Видимо я что то намудрил с разметкой и стилями