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

问题描述

我找到了一个带有 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>

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

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

提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）