Affix не работает в Bootstrap 4 (альфа)

Question

В соответствии с документацией Bootstrap 3 я добавил следующие атрибуты в панель навигации:

<nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" >
...
</nav>

После прокрутки вниз страницы Bootstrap 4 не добавляет класс в navbar, который является аффиксом. Может кто-нибудь сказать мне, как решить эту проблему? Bootstrap.js и jQuery.js работают.

Answer 1

Хотя аффикс удален из Bootstrap в версии 4. Однако вы можете достичь своей цели с помощью этого кода jQuery:

$(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue == settings.scrollTopPx || scrollValue > 70) {
         $('.navbar').addClass('fixed-top');
    } 
});

Answer 2

Обновление Bootstrap 4

В документах рекомендуется использовать липкий полифилл, а рекомендуемый ScrollPos-Styler не очень помогает с позицией прокрутки (вы можете легко определить смещение).

Я думаю, что проще использовать jQuery, чтобы наблюдать за прокруткой окна и изменять CSS соответственно на фиксированный...

  var toggleAffix = function(affixElement, wrapper, scrollElement) {

    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;

    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }

  };


  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');

    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, wrapper, $(this));
    });

    // init
    toggleAffix(ele, wrapper, $(window));
  });

Аффикс Bootstrap 4 (липкая навигационная панель)

РЕДАКТИРОВАТЬ: Другое решение заключается в использовании этого порта плагина 3.x Affix в качестве замены в Bootstrap 4..

http://www.codeply.com/go/HmY7DLHLkI

---

Связанный: анимация / сжатие NavBar при прокрутке с помощью Bootstrap 4

Answer 3

Из документации по начальной загрузке:

Удалил плагин Affix jQuery. Мы рекомендуем использовать position: sticky вместо того, чтобы заполнить Смотрите HTML5, пожалуйста, запись для деталей и конкретных рекомендаций по заполнению.

Если вы использовали Affix для применения дополнительных, не position стили, полифилы могут не поддерживать ваш вариант использования. Одним из вариантов такого использования является сторонняя библиотека ScrollPos-Styler.

Answer 4

Чтобы основываться на ответе Анвара Хусейна. Я нашел успех с этим:

$(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue > 120) {
        $('.navbar').addClass('affix');
    } else{
        $('.navbar').removeClass('affix');
    }
});

Это применит класс к панели навигации при прокрутке вниз, но также удалит класс при прокрутке вверх. Ранее при прокрутке назад применяемый класс оставался примененным к панели навигации.

Answer 5

В соответствии с цитатой Вуко из документации по Mirgation библиотека ScrollPos-Styler меня вполне устраивала.

1. Включить .js ScrollPos-Styler (scrollPosStyler.js) файл на вашу страницу.
2. Найти соответствующий <div> Вы хотите сделать "липким"

<nav class="navbar navbar-toggleable-md">

3. Применять sps sps--abv учебный класс

<nav class="navbar navbar-toggleable-md sps sps--abv">

4. добавлять .css стили, которые вы хотите задействовать после того, как элемент стал липким (согласно демонстрационной странице.

---

/** 
 * 'Shared Styles' 
**/
.sps {

}

/** 
 * 'Sticky Above' 
 *
 * Styles you wish to apply
 * Once stick has not yet been applied
**/
.sps--abv {
   padding: 10px
}

/** 
 * 'Sticky Below' 
 *
 * Styles you wish to apply
*  Once stick has been applied
**/
.sps--blw {
   padding: 2px
}

Answer 6

$(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();
    var offset = $('[data-spy="affix"]').attr('data-offset-top');
    if (scrollValue > offset) {
        $('[data-spy="affix"]').addClass('affix-top');
        var width = $('[data-spy="affix"]').parent().width();
        $('.affix-top').css('width', width);
    } else{
        $('[data-spy="affix"]').removeClass('affix-top');
    }
}); 

Answer 7

В bootstrap 4 для этого есть специальный класс. Попробуйте удалитьdata-spy="affix" data-offset-top="90" атрибуты и просто добавьте "липкий верх".

документация

Answer 8

Для пользователей, которые ищут ответ в чистом Javascript, вот как вы можете сделать это, используя чистый Javascript:

window.onscroll = (e) => {
    let scrollValue = window.scrollY;
    if (scrollValue > 120) {
        document.querySelector('.navbar').add('affix');
    } else{
        document.querySelector('.navbar').remove('affix');
    }
}

Answer 9

Попробовав каждое решение, которое я смог найти (и зная, что аффикс был удален из начальной загрузки 4), единственный способ, которым я мог получить желаемый липкий результат, который мне был нужен, - это использовать липкий набор.

Это действительно простой плагин jQuery, который легко настроить.

Просто включите код в свой проект, а затем назначьте элемент, который вы хотите придерживаться

$("#sidebar").stick_in_parent();

Answer 10

Простое использование класса fixed-top в bootstrap 4 и использование addClass и removeClass

$(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if ( scrollValue > 70) {
         $('.navbar-sticky').addClass('fixed-top');
    }else{
       $('.navbar-sticky').removeClass('fixed-top');
    }
});