Как удалить Bootstrap Affix из элемента при определенных условиях?

У меня есть элемент, в котором я использую плагин Twitter Bootstrap Affix. Если окно становится вертикально изменено до точки, где она меньше высоты элемента, я бы хотел удалить функциональность аффикса из этого элемента, так как вы не сможете увидеть все это в окне.

До сих пор я пробовал это в консоли, чтобы увидеть, можно ли его удалить, но он, похоже, не работает.

$("#myElement")
  .removeClass("affix affix-top affix-bottom")
  .removeData("affix");

$(window)
  .off("scroll.affix.data-api, click.affix.data-api");

Может, я ошибаюсь? Как я могу программным образом удалить аффикс из элемента, который уже был применен?

Ответ 1

В итоге я решил использовать решение CSS, похожее на то, что предложил @Marcin Skórzewski.

Это просто добавляет новый класс, когда высота окна короче высоты элемента.

var sizeTimer;
$(window).on("resize", function() {
    clearTimeout(sizeTimer);
    sizeTimer = setTimeout(function() {
        var isWindowTallEnough = $overviewContainer.height() + 20 < $(window).height();

        if (isWindowTallEnough) {
            $overviewContainer.removeClass("affix-force-top");
        } else {
            $overviewContainer.addClass("affix-force-top");
        }

    }, 300);
});

И затем в CSS этот класс просто добавляется:

.affix-force-top{
    position:absolute !important;
    top:auto !important;
    bottom:auto !important;
}

ИЗМЕНИТЬ

Для бутстрапа 3 это кажется эффективным:

$(window).off('.affix');
$("#my-element")
    .removeClass("affix affix-top affix-bottom")
    .removeData("bs.affix");

Ответ 2

Устаревший: ответ относится к Twitter Bootstrap v2. Текущая версия - v4.

Есть несколько вариантов попробовать.

Используйте функцию для data-offset-top. Как правило, вы используете целочисленное значение для количества прокрученных пикселей для исправления элемента. В соответствии с документацией вы можете использовать функцию JS, которая будет динамически вычислять смещение. В этом случае вы можете заставить свою функцию возвращать различное количество в зависимости от условий по вашему выбору.
Используйте мультимедийный запрос, чтобы переопределить правило CSS аффикса для небольшого окна (например, высота 200 пикселей или меньше).

Я думаю, второй вариант должен быть подходящим для вас. Что-то вроде:

@media (max-height: 200px) {
  .affix {
    position: static;
  }
}

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

PS. Компонент bootstrap navbar использует медиа-запрос для max-width, чтобы отключить фиксированный стиль для небольших устройств. Хорошо делать это не только потому, что размер экрана мал для navbar, но в мобильных устройствах position: fixed; CSS работает очень уродливо. Возьмите w в navbar внутри файла bootstrap-responsive.css.

Ответ 3

Ваш $(window).off близок, согласно @fat (автор bootstrap-affix.js) вы можете отключить плагин следующим образом:

$(window).off('.affix');

Это отключит плагин аффикса.

Смотрите: https://github.com/twitter/bootstrap/issues/5870

Ответ 4

В строке 1890 бутстрапа есть условие, следует ли предотвратить действие по умолчанию. Это позволяет вам слушать события, и если какое-то условие выполняется, предотвратите аффикс.

строка 1890 из бутстрапа: if (e.isDefaultPrevented()) return

Пример:

$('someselector')
.affix()
.on(
    'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix'
    , function(evt){  
        if(/* some condition */){  
            evt.preventDefault();  
        }  
    }
);

Ответ 5

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

Я изменил опцию смещения сверху до смешного числа, которое никогда не будет прокручиваться. Это сделало так, что мне не пришлось делать $(window).off('. Affix'); и отключить аффикс для всего.

$('#element-id').data('bs.affix').options.offset.top = 1000000000;