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

Question

Here is the code that is in my body part:

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

Here is the code in the main.styl file. I would also add to the image, but about how the site looks now, but now I can’t, because I need 10 reputation points.

@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

From what I have, how can I make my navigational sticky ounce, the user scrolls it.

Here is an image of what the site looks like:

This is what happens when the user scrolls down. I do not want the navigation bar to stick to the top when it hits it.

Answer 1

static: top . , .