CSS действия для вложенного элемента .sticky-top?

Question

[id_baton4eg]

Здравсвтуйте, вопрос о классе sticky-top (bootstrap4), он же position:sticky, хотелось бы при активном классе sticky-top изменять размер логотипа на css.
работает:

.sticky-top {
  top: 32px; //отступ появляется только когда элемент прилипает
}

но так активно всегда:

.sticky-top .navbar .navbar-brand {
  min-width: 130px; //размер установлен вне зависимости от того прилипший ли навбар
  top: 20px; // то же с высотой
}

Как узнать когда position:sticky активен и изменять только если элемент прилип ?

Answer 1

[Павел]

Добавляйте ещё один class при движении вниз и удаляйте при возвращении наверх, и к этому классу уже вешайте размер лого и другие стили

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

Answer 2

[id_baton4eg]

Пока пришлось решить вопрос так:

var $navBar = $('.sticky-top');
var navPos = $navBar.offset().top;
$(window).scroll(function() {
    var scrollPos = $(this).scrollTop();
    if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
    } else {
        $navBar.removeClass('fixed');
    }

});