隐藏 wep 应用程序的侧面导航栏

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);
}
}

还有我的导航菜单组件.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 的数字是毫秒数，您可以将其设置为您想要的任何值，但基本上，该函数只会在用户滚动时将 isScrolling 变量设置为 true，一旦他们停止滚动，它最终会在该时间之后重置为 false。clearTimeout 操作可确保计时器不断重置回 0，只要滚动继续发生。如果使用此方法，则需要向导航栏组件添加一个类绑定，该组件在 isScrolling 为 true 时添加了一些类，并在不为 true 时将其删除。

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

我建议将滚动侦听器添加到特定内容元素而不是文档或窗口对象，因为这会使您的应用程序与 DOM 更加分离。但是典型的jQuery执行方式是将该滚动侦听器添加到整个文档或窗口对象中，并以此切换类。如果你的应用程序要保持小而简单，并且你知道它将始终在浏览器中使用，那么这样做真的没有问题。您可以通过更改

(scroll)="scrollFunction()"

自

(window:scroll)="scrollFunction()"

如果内容组件不是一个单独的组件，并且它包含导航栏组件(即，如果您只是将主应用组件用于正文，并且其中有导航栏组件(，则可以使用 HostListener 而不是模板事件绑定来侦听事件。因此，与其在 HTML 中添加"(滚动("内容，不如导入主机侦听器：

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

然后在组件中：

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

这将完成同样的事情，每当在组件中检测到滚动事件时都会触发该函数。您可能希望将 CSS 过渡添加到导航栏隐藏类，以便导航栏整齐地滑入或淡入和淡出视图。:-)

编辑：我注意到在许多网站上，不是简单地让导航栏在一段时间不滚动后重新出现，而是只有在用户开始向上滚动时才会出现，并且它将始终隐藏在向下滚动时。如果你这样做，你可以避免使用超时，只需检查滚动事件以查看它是向上滚动还是向下滚动，并基于此切换 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...
}