'css scroll snapping sections in fixed navbar

I have a fixed nav bar with 3 sections. whenever i scroll, the sections should be under the nav bar with a margin of 10px. I have applied the following code, but its not working as expected. attached image for reference

Consider this as structure

<body>
<nav style="position:fixed;margin-bottom:10px" >flex-nav items</nav>
<main>
<div class=section> some list contents<div>
<div class=section> some list contents<div>
<div class=section> some list contents<div>
</main>
<body>

css

main {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

Expected:

Main page Main page

Second page Second page

Actual:

3

htmlcss


Solution 1:[1]

When you add position: fixed to your navbar, the main will not consider the navbar's height while placing itself.

So you can add a calc() for the margin which adds your navbar's height to the margin.

eg.

If the navbar's height is 50px

margin-top: calc(50px + 10px)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions