我们如何将导航栏固定在特定位置？答案

【问题标题】：How can we keep a navbar fixed on a specific position?我们如何将导航栏固定在特定位置？
【发布时间】：2020-04-18 17:09:56
【问题描述】：

我在我的 HTML 上创建了一个半页的背景图像，并且在图像下我有一个带有导航栏的 scrollspy。我想让导航栏固定在那个特定位置（不是固定顶部或固定底部）

half-page bg image

当我将其设置为位置：固定时，导航栏遍布整个页面

position: fixed

当我设置为粘性时会发生这种情况

position: sticky

CSS 代码

html {
    scroll-behavior: smooth;
}
body, html {
    height: 100%;
    margin: 0%;
}
.landingImage {
    height: 50%;
    margin: 0%;
    background-image: url("image/bgimage.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/*ID of the nav element*/
#stick {
    position: sticky;
    top: 20px;
    overflow: hidden;
}

我是这方面的新手。谢谢。

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Reproducible Example
你的意思是说你应该让你的菜单在图像之后固定并且它永远不会改变位置？页面滚动时的视图呢？

标签： css navbar nav scrollspy

【解决方案1】：

我认为这可行

#stick {
position: fixed;
top: 20px;
overflow: hidden;
width: 100%;
height: 100px; /* for height you can use any value */
}

【讨论】：