Bootstrap Navbar随着smoothScroll消失

Posted 2023-03-05

【中文标题】Bootstrap Navbar随着smoothScroll消失

【英文标题】：Bootstrap Navbar disappearing with smoothScroll

【发布时间】：2021-06-27 16:20:18

【问题描述】：

目前我有一个引导式导航栏，它工作得很好，包括移动响应能力，但是我无法纠正的一个问题是 nav-item 的（标题）

nav-item 使用# 导航到同一页面的各个部分，并且我创建了一个（点击）监听器函数，smooth 滚动导航（动画它）

这里是 .ts 函数：

 scrollToElement($element): void 
      $element.scrollIntoView( behavior: 'smooth', block: 'start', inline: 'nearest' );
  

这里是 .html 导航：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!--<a class="navbar-brand" [routerLink]="'.'">MEX</a>-->
    <div class="logo-header">
        <a (click)="scrollToElement(hero)">
          <img src="assets/img/landing/hero/AEM%20Logo%20black.png"  class="logo" />
        </a>
    </div>
    <!-- Step 3: Toggle the value of the property when the toggler button is clicked. -->
    <button class="navbar-toggler text-center" mat-button type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
      <mat-icon>menu</mat-icon>
    </button>
  
    <!-- Step 2: Add the ngbCollapse directive to the element below. -->
    <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse" style="justify-content: flex-end;">
      <ul class="navbar-nav text-center">
        <li class="nav-item active">
          <!-- Step 4: Close the menu when a link is clicked. -->
          <a class="nav-link active" (click)="scrollToElement(company)">Company</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" (click)="scrollToElement(research)">Research & Analysis</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" (click)="scrollToElement(pricing)">Pricing & Plans</a>
        </li>
        <li>
            <button routerLink="/login" type="button" class="btn btn-outline-warning login-btn">
              <mat-icon>login</mat-icon>Login
            </button>
          </li>
      </ul>
    </div>
  </nav>

当单击这些nav-items 时，（单击）侦听器会完成其工作并动画导航到请求的部分，但问题是，导航栏完全消失了。

(注意：在（点击）监听器或 .ts 函数中添加 isMenuCollapsed = false 并不能解决问题

【问题讨论】：

将 Bootstrap 类 fixed-top 添加到您的导航栏并不能满足您的需要？

【参考方案1】：

在导航栏的组件中提供.navbarposition: sticky !important; 将解决此问题，同样使用引导类fixed-top 也可以解决此问题