Подтвердить что ты не робот

событие unaffix для ассемблера Bootstrap?

Я хочу объединить плагин аффикса с классом bootstrap navbar-fixed-top. Пока у меня это работает, когда я прокручиваю навигатор, он фиксируется. Но когда я прокручиваю назад, я хочу, чтобы он снова вернулся в статическое состояние. Я видел некоторый код, который я думаю из более старых версий начальной загрузки и события unaffix. Почему он ушел? Могу ли я создать его? Или как выполнить то, что я пытаюсь здесь?

navbar_secondary = $( '.navbar-secondary:first' );

navbar_secondary.affix( {
    offset: {
        top: function () {
            return (this.top = navbar_secondary.offset().top )
        }
    }
} );

navbar_secondary.on( 'affix.bs.affix', function () { // this is actually the wrong event for this. I want this to fire when its *not* affixed
    console.log('affix');
    navbar_secondary.removeClass( 'navbar-fixed-top' ).addClass( 'navbar-not-fixed' );
} );

navbar_secondary.on( 'affixed.bs.affix', function () {
    console.log('affixed');
    navbar_secondary.removeClass( 'navbar-not-fixed' ).addClass( 'navbar-fixed-top' );
} );
4b9b3361

Ответ 1

Выяснил это сам. Названия этих событий совершенно сбивают с толку. affixed-top.bs.affix на самом деле является событием, когда оно возвращается к тому, что оно не прикреплено.

navbar_secondary = $( '.navbar-secondary:first' );

navbar_secondary.affix( {
    offset: {
        top: function () {
            return (this.top = navbar_secondary.offset().top )
        }
    }
} );

navbar_secondary.on( 'affixed-top.bs.affix', function () {
    console.log('unaff');
    navbar_secondary.removeClass( 'navbar-fixed-top' ).addClass( 'navbar-not-fixed' );
} );

navbar_secondary.on( 'affix.bs.affix', function () {
    console.log('aff');
    navbar_secondary.removeClass( 'navbar-not-fixed' ).addClass( 'navbar-fixed-top' );
} );

Резюме

affix.bs.affix => перед фиксированным позиционированием применяется к элементу
affixed.bs.affix => после того, как фиксированное позиционирование применяется к элементу
affix-top.bs.affix => до того, как верхний элемент вернется в исходное (нефиксированное) положение
affixed-top.bs.affix => после того, как верхний элемент вернется в исходное (нефиксированное) положение
affix-bottom.bs.affix => до того, как нижний элемент вернется в исходное (нефиксированное) положение
affixed-bottom.bs.affix => после того, как нижний элемент вернется в исходное (нефиксированное) положение

Ответ 2

Анбискад, я обнаружил, что нижнее смещение не работает так. Если вам нужно обработать событие unaffix по мере того, как запрашивал redanimalwar, я предлагаю явно установить позиционирование CSS для каждой фазы. Например:

    ul.affix {
      position: fixed; 
      top: 100px;
    }
    ul.affix-top {
      position: static;
    }
    ul.affix-bottom {
      position: absolute;
    }

И тогда вы можете определить значение функции offset-bottom следующим образом:

    <ul class="list-group navbar_secondary" id="affix-nav" data-spy="affix" data-offset-top="500" data-offset-bottom="-4620">

Таким образом, функция запустит 500 пикселей и остановится в нужной точке прокрутки.