如何使导航栏始终位于顶部？

Question

我正在使用

Foundation

by

ZURB

并尝试将导航栏移至顶部。

Answer 1

我不知道这两件事是什么，但这就是如何使用 CSS 修复某些内容，无论窗口滚动位置如何：

#navbar {
    background: red;
    position: fixed;
    top: 0px;
    width: 100%;
}

<div id="navbar">NavBar!</div>

<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet. sit amet<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet. sit amet<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet.<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet. sit amet<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet.

Answer 2

如果您使用粉底，则可以使用：

<nav class="top-bar fixed"></nav>

Answer 3

添加亚历克斯·韦恩的答案：

我发现有必要添加一个足够高的数字的 z-index ，以使导航栏始终出现在其他元素的顶部。

#navbar {
   z-index: 10000;
   position: fixed;
   top: 0px;
   width: 100%;
}​

Answer 4

使用风格：

position:fixed;
top:0px;

Answer 5

也可以使用bootstrap设计的类。

  <nav class="navbar-fixed-top">

Answer 6

首先导入ActivatedRoute：

import { ActivatedRoute } from "@angular/router";

然后在构造函数中您可以提取参数。例如：

constructor(private route: ActivatedRoute) { 
    this.route.queryParams.subscribe(params => {
        let myparam = params['myparam'];
        console.log(myparam); // Print the parameter to the console.  
    });
}

有关信息，请参阅 https://www.mackenziesoftware.com/2020/06/how-to-get-param-from-url-in-angular.html。