BOOTSTRAP 4 - Присоединяйтесь от Scrollspy к Scrolltop

Question

Я все ближе к HTML, CSS, JAVA в BOOTSTRAP.Я пытаюсь "объединить" функцию SCROLLSPY с SCROLLTOP.Я хотел бы изменить внешний вид (размер, цвет ...) Все отзывчивые.

Для SCROLLTOP я использую этот скрипт, но он не отзывчив:

$(document).ready(function() {
  $(window).on("scroll", function() {
    if ($(window).scrollTop() >= 50) {
      $(".navbar").addClass("compressed");
    
    } else {
      $(".navbar").removeClass("compressed");
    
    }

    if ($(window).scrollTop() >= 1000) {
      $(".navbar").addClass("compressed2");

    } else {
      $(".navbar").removeClass("compressed2");

    }
  });
});

Для SCOLLSPY я использую это:

$(document).ready(function(){
  $('body').scrollspy({target: ".navbar", offset: 50});

  $("#navbarTarget a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;

      
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    }  
  });
});

Существует способ использовать ID или HREF ... или другие функции (которые я не знаю) для запуска анимации.

THX