@id_baton4eg

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

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

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


Как узнать когда position:sticky активен и изменять только если элемент прилип ?
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ответы на вопрос 2
PavelMonro
@PavelMonro
Добавляйте ещё один class при движении вниз и удаляйте при возвращении наверх, и к этому классу уже вешайте размер лого и другие стили
$(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue > 150) {
        $('.navbar').addClass('newclass');
    } else{
        $('.navbar').removeClass(newclass');
    }
});
Ответ написан
@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');
    }

});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы