CSS actions for nested .sticky-top element?

Question

css

Hello, question about the sticky-top class (bootstrap4), aka position: sticky, I would like to change the size of the logo to css when the sticky-top class is active.
works:

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

but it's always active

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

How to know when position:sticky is active and change only if the element is sticky?

Answer 1

Add another class when moving down and remove it when returning up, and already hang the size of the logo and other styles to this class

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

Answer 2

So far I had to solve the problem like this:

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');
    }

});