Navbar occupies snap scrollbar space-CodePudding

I'm trying to build a page with snap scrollbar using Tailwind.
My goal is to have few slides which can be scrolled and a sticky navbar at the top.

Scroll with only slides works fine, however after adding a sticky navbar to the top I've noticed a problem.

scroll preview notices navbar as additional space (a one more slide which cannot be accessed)
when scrolling to the top a white space can be seen.

Tried using absolute positioning instead of sticky, but cannot figure out how would i move the nav across pages.

Code example:

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div >
    <div >
      <div >Nav Bar</div>
    </div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</body>

CodePudding user response：

You need to set the height of the parent div of the div with Nav Bar as content.

<script src="https://cdn.tailwindcss.com"></script>

<body>
  <div >
    <div >
      <div >Nav Bar</div>
    </div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</body>

CodePudding user response：

You are adding h-screen in a div enclosing navbar which causes the wite space to appear. You can remove the h-screen from line 6 <div > .

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div >
    <div >
      <div >Nav Bar</div>
    </div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</body>