How to make the top bar sticky on all screens when scrolling down with jQuery and aligned the slider text in the center?

Question

I have found a simple text slider with HTML, CSS, and jQuery. It is working fine in the simple HTML file with centered aligned text.

In magento2 I have created a top bar and added all the things it is not working fine. The text is not centered aligned and not slide accordingly see the screenshot: https://prnt.sc/15wi4c9. I am a little bit confused about how to accomplish this.

Here is my code of the top-bar:

require([ "jquery" ], function($){
    $(document).scroll(function () {
    /*--text slider--*/
        var width = 500;
        var animation_speed = 700;
        var time_val = 5000;
        var current_slide = 1;

        var slider = $('#slider');
        var slide_container = $('.slides');
        var slides = $('.slide');

        var interval;

        slides.each(function(index){
          $(this).css('left',(index*100)+'%');
        });

        function startSlider() {
          interval = setInterval(function() {
            slide_container.animate({'left': '-='+(width+'%')}, animation_speed, function() {
              if (++current_slide === slides.length) {
                current_slide = 1;
                slide_container.css('left', 0);
              }
            });
          }, time_val);
        }

startSlider();
    
});

#slider {
  width: 100%;
  height: 40px;
  overflow: hidden;
}
.slides {
  position: relative;
  margin: 0;
  padding: 0;
}
.slide {
    position: absolute;
    list-style-type: none;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    background: #eee !important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}
.slides p {
    margin-top: 12px;
}
.slide1 {background: transparent;}
.slide2 {background: transparent;}
.slide3 {background: transparent;}
.slide4 {background: transparent;}
.slide5 {background: transparent;}

<div id="slider">
  <ul class="slides">
    <li class="slide slide1"><p>Get 5% discount on subscription</p></li>
    <li class="slide slide2"><p>COD is avaialble</p></li>
    <li class="slide slide3"><p>Get 5% extra discount on PREPAID orders</p></li>
    <li class="slide slide1"><p>Get 5% discount on subscription</p></li>
  </ul>
</div>

Note: I want the top bar sticky when scrolling down on all screens and centered aligned the text slider.

Please help me out I am confused about handle this.

Thanks in advance