html - 隐藏 wep 应用的侧边导航栏

Question

我构建了一个 Angular 4 网络应用程序。我希望我的导航栏在我移动鼠标时自动隐藏。有一个我想使用的例子 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 数字是毫秒数，您可以将其设置为任何您想要的值，但基本上，该函数只会在用户滚动时将 isScrolling 变量设置为 true，一旦他们停止滚动，它最终将被重置在那之后变成假的。 clearTimeout 确保只要滚动继续发生，计时器就会一直重置为 0。如果您使用此方法，那么您可能希望将类绑定(bind)添加到导航栏组件，该组件在 isScrolling 为真时添加了一些类，而在它不是时将其删除。

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

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

在任何地方添加窗口事件监听器

(scroll)="scrollFunction()"

到

(window:scroll)="scrollFunction()"

如果您的内容组件不是一个单独的组件，并且其中包含导航栏组件(即，如果您只是将主应用程序组件用于主体，并且在其中包含导航栏组件)，您可以使用 HostListener 而不是模板事件绑定(bind)来监听事件。因此，与其在 HTML 中添加“(滚动)”，不如导入主机监听器:

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

然后在组件中:

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

这将完成同样的事情，只要在组件内检测到滚动事件就会触发该函数。您可能希望向 navbar-hidden 类添加 CSS 转换，以便导航栏可以整齐地滑动或淡入和淡出 View 。 :-)

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