javascript - 使用jQuery向下滚动并将滑块文本居中对齐时，如何使顶部栏在所有屏幕上保持粘性？

Question

我发现了一个带有 HTML、CSS 和 jQuery 的简单文本滑块。它在带有居中对齐文本的简单 HTML 文件中运行良好。

在 magento2 中，我创建了一个顶部栏并添加了所有无法正常工作的内容。文本未居中对齐且未相应滑动，请参见屏幕截图：https ://prnt.sc/15wi4c9 。我对如何做到这一点有点困惑。

这是我的顶栏代码：

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>

注意：在所有屏幕上向下滚动并居中对齐文本滑块时，我希望顶部栏保持粘性。

请帮帮我，我对处理这个感到困惑。

提前致谢

标签： javascripthtmljquerycssmagento2.2