使用Flex概念创建的“选项卡”内容可在所有屏幕上响应。

Question

我希望我的“标签”部分在所有屏幕上都可以响应，在大屏幕上看起来不错，但是在较小的屏幕上，即使在进行大量搜索后，我都找不到最佳的解决方案/方法，因此它已经过调整。

当用户滚动浏览内容时，我希望它具有选项卡的活动类，并且这些选项卡应可水平滚动。

为了让您对我要说的话有所了解，请仔细阅读
此网站https://www.crunchbase.com/organization/ant-financial#section-overview的“标签”部分。

是stackoverflow的新手，在发布此问题时，请忽略我的错误。 我会很感激的。谢谢

这是我的“标签”部分使用的JavaScript，HTML和CSS。

class StickyNavigation {

  constructor() {
    this.currentId = null;
    this.currentTab = null;
    this.tabContainerHeight = 45;
    this.lastScroll = 0;
    let self = this;
    let w = $('#main-content-region').width();
    let sw = screen.width;
    let new_w = w + ((sw - w));
    let ml = (-1 * (sw - w) / 2)
    $('.sticky-nav-tabs-container').width(new_w);
    $('.sticky-nav-tabs-container').css('margin-left', ml);
    $('.sticky-nav-tab').click(function() {
      self.onTabClick(event, $(this));
    });
    $(window).scroll(() => { this.onScroll(); });
    $(window).resize(() => { this.onResize(); });
  }

  onTabClick(event, element) {
    event.preventDefault();
    let scrollTop = $(element.attr('href')).offset().top - this.tabContainerHeight + 1;
    $('html, body').animate({ scrollTop: scrollTop }, 600);
  }

  onScroll() {
    this.checkHeaderPosition();
    this.findCurrentTabSelector();
    this.lastScroll = $(window).scrollTop();
  }

  onResize() {
    let w = $('#main-content-region').width();
    let sw = screen.width;
    let new_w = w + ((sw - w));
    let ml = (-1 * (sw - w) / 2)
    $('.sticky-nav-tabs-container').width(new_w);
    $('.sticky-nav-tabs-container').css('margin-left', ml);
  }

  checkHeaderPosition() {
    const headerHeight = 0;
    let offset = ($('.sticky-nav-tabs').offset().top + $('.sticky-nav-tabs').height() - this.tabContainerHeight) - headerHeight;
    if($(window).scrollTop() > this.lastScroll && $(window).scrollTop() > offset) {
      $('.sticky-nav-tabs-container').removeClass('sticky-nav-tabs-container--top-first');
      $('.sticky-nav-tabs-container').addClass('sticky-nav-tabs-container--top-second');
    }
    else if($(window).scrollTop() < this.lastScroll && $(window).scrollTop() > offset) {
      $('.sticky-nav-tabs-container').removeClass('sticky-nav-tabs-container--top-second');
      $('.sticky-nav-tabs-container').addClass('sticky-nav-tabs-container--top-first');
    }
    else {
      $('.sticky-nav-tabs-container').removeClass('sticky-nav-tabs-container--top-first');
      $('.sticky-nav-tabs-container').removeClass('sticky-nav-tabs-container--top-second');
    }
  }

  findCurrentTabSelector(element) {
    let newCurrentId;
    let newCurrentTab;
    let self = this;
    $('.sticky-nav-tab').each(function() {
      let id = $(this).attr('href');
      let offsetTop = $(id).offset().top - self.tabContainerHeight;
      let offsetBottom = $(id).offset().top + $(id).height() - self.tabContainerHeight;
      if($(window).scrollTop() > offsetTop && $(window).scrollTop() < offsetBottom) {
        newCurrentId = id;
        newCurrentTab = $(this);
      }
    });

    if(this.currentId != newCurrentId || this.currentId === null) {
      if (this.currentTab){
        this.currentTab.css('background', '#fff');
        this.currentTab.css('color', '#000');
        /*$('this.currentTab').addClass('sticky-nav-tab:hover');*/
      }
      this.currentId = newCurrentId;
      this.currentTab = newCurrentTab;
      if (this.currentTab){
        this.currentTab.css('background', '#0270AC');
        this.currentTab.css('color', '#fff');
      }
    }
  }
}

new StickyNavigation();

.sticky-nav-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    position: relative;

}

.sticky-nav-tabs-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: absolute;
    bottom: 2rem;
    width: 100%;
    height: 3rem;
    -webkit-box-shadow: 0 8px 3px -8px black;
    -moz-box-shadow: 0 8px 3px -8px black;
    box-shadow: 0 8px 3px -8px black;
    background: #fff;
    z-index: 1;
    -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.sticky-nav-tabs-container--top-first {
    position: fixed;
    top: 0;
    z-index: 1;
    -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.sticky-nav-tabs-container--top-second {
    position: fixed;
    top: 0;
}

.sticky-nav-tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: black;
    letter-spacing: 0.1rem;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-size: 1.4rem;
}

.sticky-nav-tab:hover {
    color: white !important;
    background: #0270AC !important;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;

<section class="sticky-nav-tabs">
    <div class="sticky-nav-tabs-container">
      <a class="sticky-nav-tab" href="#overview">Overview</a>
      <a class="sticky-nav-tab" href="#Objective">Objective</a>
      <a class="sticky-nav-tab" href="#Eligibility">Eligibility</a>
      <a class="sticky-nav-tab" href="#Others">Others</a>
      <a class="sticky-nav-tab" href="#Funding">Funding</a>
      <a class="sticky-nav-tab" href="#HowToApply">How To Apply</a>
      <a class="sticky-nav-tab" href="#references">References</a>
      <a class="sticky-nav-tab" href="#resources">Resources</a>
    </div>
  </section>