HTML:我想使标题可滚动,并且正文应固定

时间:2019-01-09 13:37:31

标签: html css mobile navbar responsive

我想使导航栏可滚动,并且屏幕主体应固定在移动显示器或移动屏幕上。下面是代码片段,这是该图片的图像:IMAGE

在图像中,您会发现黑色区域​​可滚动,红色区域应固定,但这仅在移动响应屏幕不在Web或更大型屏幕中的情况下

<nav class="main-navigation">
  <!-- <div class="navbar-header animated fadeInUp">
      <a class="navbar-brand" href="#">Logo Area</a>
  </div> -->
  <ul class="nav-list">
      <li class="nav-list-item">
          <a class="nav-link" [routerLink]="['pan']" routerLinkActive="isActive" routerLinkActiveOptions="{exact:true}">IDENTITY</a>
      </li>
      <li class="nav-list-item" *ngIf="stageEnable>=2" [routerLink]="['basic']" >
          <a class="nav-link" routerLinkActive="router-link-active">BASIC INFO</a>
      </li>
      <li class="nav-list-item" *ngIf="2>stageEnable">
        <a class="nav-link" >BASIC INFO</a>
    </li>
      <li class="nav-list-item" *ngIf="stageEnable>=3" [routerLink]="['regulatory']">
          <a class="nav-link"  >REGULATORY INFO</a>
      </li>
      <li class="nav-list-item"  *ngIf="3>stageEnable" >
        <a class="nav-link"  >REGULATORY INFO</a>
    </li>
      <li class="nav-list-item" *ngIf="stageEnable>=4" [routerLink]="['segment']">
          <a class="nav-link"  >SELECT PLAN</a>
      </li>
      <li class="nav-list-item" *ngIf="4>stageEnable" >
        <a class="nav-link"  >SELECT PLAN</a>
    </li>
      <li class="nav-list-item" *ngIf="stageEnable>=5" [routerLink]="['document']"> 
          <a class="nav-link"  >UPLOAD DOCS</a>
      </li>
      <li class="nav-list-item"  *ngIf="5>stageEnable"> 
        <a class="nav-link"  >UPLOAD DOCS</a>
    </li>
      <li class="nav-list-item" *ngIf="stageEnable>=6" [routerLink]="['review']">
        <a class="nav-link" >SUBMIT</a>
    </li>
    <li class="nav-list-item"   *ngIf="6>stageEnable">
        <a class="nav-link" >SUBMIT</a>
    </li>
  </ul>

</nav>
<!-- <div class="underline_navbar" value="40"></div> -->
<div class="container">
        <div class="progress">
          <div class="progress-bar" role="progressbar" [ngStyle]="{'width':progress+'%'}" >
            <span class="sr-only">60% Complete</span>
          </div>
        </div>
      </div>
<!-- <mat-progress-bar mode="determinate" value="40"></mat-progress-bar> -->
<div class="layout_customer">
        sacsacsacsacsacsacsacsacsasacsacsacsacsacsacsacsacsacacsacsacsacsacsaccccccccccccccccccccccccccccccccccccccccccdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

</div>

0 个答案:

没有答案