CSS - 菜单保持在顶部，滚动时当前子菜单处于活动状态答案

【问题标题】：CSS - menu staying on top, current submenu active when scrollingCSS - 菜单保持在顶部，滚动时当前子菜单处于活动状态
【发布时间】：2020-01-06 13:09:59
【问题描述】：

当我尝试这样做时有点复杂，所以我添加了一个绘图；）我希望它足够清楚

我希望菜单位于顶部并在向下时保留在此处，但这仅在标题滚动到底部之后。

我正在使用引导程序，也想知道当我滚动到它时如何使选定的子菜单处于活动状态

<div>
                <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important">
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
                        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                            <li class="nav-item active">
                                <a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div style="margin: 2em;"></div>
            </div>

【问题讨论】：

position:sticky 听起来不错。
codepen.io/fishtoyo/pen/PqEYjY 是一个很好的例子。使用 jquery 设置标题标签的高度，以便在您需要时更改。

标签： css vue.js bootstrap-4

【解决方案1】：

我希望这是您所期望的，请检查我的答案。

只需将以下给定的 css 属性添加到导航栏：

position:sticky; 
top:0;
z-index:1;

注意：在全屏模式下查看我的答案。因为根据你的代码导航栏只出现在大屏幕上

演示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <p>some text</p>
  <p style="margin-top:100px;">some text</p>

</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important;position:sticky; top:0;z-index:1;">
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
      </li>
    </ul>
  </div>
</nav>
<div style="margin: 2em;"></div>



<div class="jumbotron text-center">
  <h1>some contents </h1>
  <p>lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<div class="container">
  <p style="margin-top:100px;">some text</p>

  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>

  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>

  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
  <p style="margin-top:100px;">some text</p>
</div>

【讨论】：

【解决方案2】：

您应该使用position: sticky; 来实现这种类型的导航菜单。点击以下网站了解更多详情。

Open this site

【讨论】：