时间戳

首页 > 解决方案 > Bootstrap Navbar随着smoothScroll消失

html - Bootstrap Navbar随着smoothScroll消失

问题描述

目前我有一个自举导航栏，它工作得很好，包括移动响应能力，但是我无法纠正的一个问题是nav-item's (headings)

使用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" alt="logo" 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（点击）监听器完成它的工作并动画导航到请求的部分时，问题是，导航栏完全消失了。

（注意：添加isMenuCollapsed = false（单击）侦听器或 .ts 函数不能解决问题

标签： htmlangulartypescriptbootstrap-4

解决方案

在导航栏的组件中给出.navbar position: sticky !important;将解决这个问题，同样使用引导类也可以解决这个fixed-top问题

推荐阅读