wep app的隱藏側導航欄

Question

我已經構建了一個Angular 4 web應用程序。當我移動鼠標時，我希望我的導航欄自動隱藏。有一個例子，我想使用https://codepen.io/JFarrow/pen/fFrpg。我看了一些網上的文件，但我仍然無法弄清楚如何。這裏是我的navmenu.component.html代碼：

<meta http-equiv="pragma" content="no-cache" /> 

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
<script type="text/javascript" src="jquery-1.8.3.js"></script> 

<div class='main-nav'> 
    <div class='navbar navbar-inverse'> 
     <div class='navbar-header'> 
      <a class='navbar-brand' [routerLink]="['/home']">Navbar</a> 
      <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'> 
       <span (click)="isCollapsed = !isCollapsed">Toggle navigation</span> 
       <span class='icon-bar'></span> 
       <span class='icon-bar'></span> 
       <span class='icon-bar'></span> 
       <span class='icon-bar'></span> 
      </button> 
     </div> 
     <div class='clearfix'></div> 
     <div class='navbar-collapse collapse' > 
       <ul class='nav navbar-nav'> 
        <li [routerLinkActive]="['link-active']"> 
         <a [routerLink]="['/home']"> 
          <span class='glyphicon glyphicon-home'></span> Home 
         </a> 
        </li> 
        <li [routerLinkActive]="['link-active']"> 
         <a [routerLink]="['/login']"> 
          <span class='glyphicon glyphicon-log-in'></span> Log In 
         </a> 
        </li> 
        <li [routerLinkActive]="['link-active']"> 
         <a [routerLink]="['/margin']"> 
          <span class='glyphicon glyphicon-list'></span> Report 
         </a> 
        </li> 
        <li [routerLinkActive]="['link-active']"> 
         <a [routerLink]="['/smart-table']"> 
          <span class='glyphicon glyphicon-list'></span> Smart table 
         </a> 
        </li> 
       </ul> 
</div> 
    </div> 
</div> 

而且我navmenu.component.ts：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'nav-menu', 
    templateUrl: './navmenu.component.html', 
    styleUrls: ['./navmenu.component.css'] 
}) 
export class NavMenuComponent { 
    public isCollapsed: boolean = false; 

    public collapsed(event: any): void { 
     console.log(event); 
    } 

    public expanded(event: any): void { 
     console.log(event); 
    } 
} 

而且我navmenu.component.css：

li .glyphicon { 
    margin-right: 10px; 
} 

/* Highlighting rules for nav menu items */ 
li.link-active a, 
li.link-active a:hover, 
li.link-active a:focus { 
    background-color: #4189C7; 
    color: white; 
} 

/* Keep the nav menu independent of scrolling and on top of other items */ 
.main-nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1; 
} 

@media (min-width: 768px) { 
    /* On small screens, convert the nav menu to a vertical sidebar */ 
    .main-nav { 
     height: 100%; 
     width: calc(25% - 20px); 
    } 
    .navbar { 
     border-radius: 0px; 
     border-width: 0px; 
     height: 100%; 
    } 
    .navbar-header { 
     float: none; 
    } 
    .navbar-collapse { 
     border-top: 1px solid #444; 
     padding: 0px; 
    } 
    .navbar ul { 
     float: none; 
    } 
    .navbar li { 
     float: none; 
     font-size: 15px; 
     margin: 6px; 
    } 
    .navbar li a { 
     padding: 10px 16px; 
     border-radius: 4px; 
    } 
    .navbar a { 
     /* If a menu item's text is too long, truncate it */ 
     width: 100%; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis; 
    } 
} 

而我不知道應該在哪裏添加代碼。有關於添加js函數的網上代碼，或使用一些buid在引導程序功能，只是不適合我....

感謝您的幫助。

Answer 1

有幾種方法可以做到這一點，但這裏是我如何做到這一點。您需要在整個頁面或頁面的主體/內容部分添加滾動事件偵聽器。如果頁面的內容部分是它自己的組件，並且導航欄是它自己的獨立組件，那麼您可能會有一個類似這樣的模板。

<navbar-component></navbar-component> 
<content-component></content-component> 

在這種情況下，你可以滾動偵聽器添加到觸發一些變量，而滾動發生的內容組件，然後滾動停止時返回它（假設這是你想要的行爲）。要做到這一點，您可能需要在滾動過程中使用去抖動和超時。是這樣的：

<content-component (scroll)="scrollFunction()"></content-component> 

.... and then somewhere in the code for the component that hosts both the navbar and content ... 

timeout: any; 
isScrolling: boolean = false; 

scrollFunction() : void { 
    this.isScrolling = true; 
    clearTimeout(this.timeout); 
    this.timeout = setTimeout(()=> { 
     this.isScrolling = false 
    }, 1000); 
} 

這1000多款是NUM毫秒，你可以將其設置爲任何你想要的，但基本上，該功能將只設置isScrolling變量設置爲true當用戶滾動，一旦他們停止滾動它將最終在該時間之後重置爲假。只要滾動繼續發生，clearTimeout就可以確保定時器一直保持復位爲0。如果你使用這個方法，那麼你會想要添加一個類綁定到navbar組件，該組件在isScrolling爲true的時候添加了一些類，當它不是的時候刪除它。

<navbar-component [class.navbar-hidden]="isScrolling"></navbar-component> 
<content-component (scroll)="scrollFunction()"></content-component> 

我建議將滾動偵聽器添加到特定內容元素而不是文檔或窗口對象，因爲這會使您的應用與DOM更加脫鉤。但是，典型的jQuery做事的方式是將滾動監聽器添加到整個文檔或窗口對象中，然後使用該對象切換類。如果您的應用程序要保持小而簡單，並且您知道它將始終在瀏覽器中使用，那麼這樣做確實沒有問題。您可以通過僅改變

(scroll)="scrollFunction()" 

到

(window:scroll)="scrollFunction()" 

任意位置添加窗口事件監聽器如果您的內容分量不是單獨的組件，它包含在其中的導航欄組分（即，如果您只是使用主體應用程序組件，並且內部有navbar組件），則可以使用HostListener而不是模板事件綁定來監聽事件。因此，而不是在HTML並稱「（滾動）」的東西，你會導入主監聽：

import { Component, HostListener, ....(anything else you have...) } from '@angular/core' 

，然後在組件：

@HostListener('scroll') myScrollFunction() { 
... same code here as above.... 
} 

，將完成同樣的事情，從而觸發任何時候在組件內部檢測到滾動事件時都會發揮作用。您可能希望將CSS過渡添加到navbar-hidden類，這樣導航欄就會滑動或淡入淡出。 :-)

編輯：我注意到，在許多網站上，而不是簡單地讓導航欄在一定時間不滾動後重新出現，它們將只在用戶開始向上滾動時纔會出現，它會總是隱藏在下卷軸上。如果你這樣做，你可以避免使用超時，並檢查滾動事件，看它是否向上或向下滾動，並基於此切換isScrolling變量。要通過事件數據作爲參數，在您的模板：

<navbar-component [class.navbar-hidden]="isScrollingDown"></navbar-component> 
<content-component (scroll)="scrollFunction($event)"></content-component> 

，然後在你的組件......

isScrollingDown: boolean; 
lastScrollPosition: number; 

scrollFunction($event) : void { 
    let newPosition = $event.srcElement.scrollTop; 
    if (newPosition <= this.lastScrollPosition){ 
     isScrollingDown = false; 
    } 
    else { 
     isScrollingDown = true; 
    } 
    this.lastScrollPosition = newPosition; // store the last position so you can compare the new and old position with each function call 
} 

scrollTop的僅僅是指定每個滾動位置的DOM的屬性的名稱元件。

如果你走HostListener路由，這裏是你如何將$ event參數傳遞給它。

@HostListener('scroll', ['$event']) myScrollFunction($event){ 
    ... similar code here... 
}