需要帮助在滚动条上制作粘性导航栏 - 在 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 添加到导航栏即可。然后，您应该在主页上添加一个上边距，这样导航栏下就不会隐藏任何内容。

需要帮助在滚动条上制作粘性导航栏 - 在 nodejs/express 中使用 Jade 和 Stylus

Need help making a sticky Nav bar on scroll - using jade and stylus in nodejs/express

jquery

html

css

pug

stylus