需要帮助在滚动时制作粘性导航栏 - 在nodejs / express中使用jade和stylus

Question

以下是我的正文部分中的代码：

header.main-header
  h1 Reshared
  p This site is still under construction.
nav.main-nav
  ul
      li
        a(href="#") About
      li
        a(href="#") Services
      li
        a(href="#") Contact
.main
  h2 This is a Column
  p This is a test

这是main.styl文件中的代码。我还想添加一张图片，但是现在该网站看起来像什么，但我现在不能，因为我需要10个声望点。

@import 'nib'

global-reset()

*
  box-sizing border-box

body
  font-size 16px
  font-family arial, sans-serif

.main-header
  background #f07057
  height 100vh
  position fixed
  width 100%
  top 0
  text-align center
  color #f7f7f7
  display flex
  align-items center
  justify-content center
  flex-direction column

  h1
    font-size 2em

body
  padding-top calc(100vh - 5em)

.main-nav
  background #f7f7f7
  height 80px
  z-index 50
  border-bottom #f07057 5px solid
  text-align center
  display flex
  align-items center
  justify-content center

  li
    display inline

  a
    text-decoration none
    color #111
    font-family arial, sans-serif
    padding 20px
    font-size 20px

.main-nav, .main
   position relative
.main
   background #f2f2e8

根据我的具体情况，我如何让用户滚动浏览器使用粘性盎司。

以下是该网站的图片：

以下是用户向下滚动时发生的情况。我不希望导航栏在击中时粘在顶部。

Answer 1

只需将static: top添加到导航栏即可。然后，您应该在主页面上添加一个上边距，这样就不会在导航栏下隐藏任何内容。