Scroll-snap not working - is it because the header above the elements doesn't allow it to snap to "start"?

Question

I'm building a website for a personal project, and want the sections in the main body of the page (below the header) to snap to start when scrolling vertically. I have included the necessary code in the parent and child divs respectively, yet I see no difference at all when scrolling. I'm thinking it may be because the header disrupts this code somehow?

I'll include the header code as well as the parent/child div code just in case (I've changed the text for copyright purposes so excuse the incoherency of the site.)

Skip to the Body Html and CSS if the Headers code is irrelevant

thank you!

Codepen: https://codepen.io/qwaliy/pen/KKoWpxV

Header:

<header id="l-static-header">
        <div class="logo-container">
            <div class="logo-image">
                <img src="/Users/ula/Desktop/rootfolder-IFO/img/logo-invert-temp.png" class="logo-png" description="industry (for) outsiders logo">
            </div>
            <div class="logo-title">
                <a href="index.html">
                    <h1 class="header-title">Title<br>(and)<br>Title</h1>
                </a>
            </div>
        </div>
        <div class="menu-container">
      <p class="menu-container-text">:</p>
            <div class="menu-container-top">
        <nav class="top-menu-nav">
                   <ul class="menu-top">
                      <li class="top-menu-item"><a href="people.html">People</a>
               <div class="hover-menu-container-people">
                            <ul class="hover-menu">
                                    <li class="hover-menu-item"><a href="#">Tennis</a></li>
                                    <li class="hover-menu-item"><a href="#">Rugby</a></li>
                                    <li class="hover-menu-item"><a href="#">Golf</a></li>
                                    <li class="hover-menu-item"><a href="#">Policemen</a></li>
                                    <li class="hover-menu-item"><a href="#">Dance</a></li>
                                    <li class="hover-menu-item"><a href="#">Athletics</a></li>
                            </ul>
                </div>
             </li>
                       <li class="top-menu-item"><a href="#">Places</a>
               <div class="hover-menu-container-places">
                 <ul class="hover-menu">
                   <li class="hover-menu-item"><a href="#">London</a></li>
                   <li class="hover-menu-item"><a href="#">Brighton</a></li>
                   <li class="hover-menu-item"><a href="#">Birmingham</a></li>
                   <li class="hover-menu-item"><a href="#">Glasgow</a></li>
                   <li class="hover-menu-item"><a href="#">Manchester</a></li>
                   <li class="hover-menu-item"><a href="#">Nottingham</a></li>
                 </ul>
               </div>
             </li>
                       <li class="top-menu-item"><a href="#">Editions</a>
               <div class="hover-menu-container-editions">
                 <ul class="hover-menu">
                   <li class="hover-menu-item"><a href="#">Winter</a></li>
                 </ul>
             </div>
             </li>
                       <li class="top-menu-item"><a href="#">Events</a></li>
                   </ul>
        </nav>
            </div>
    </div>
    <div class="search-bar-container">
        <input type="text" placeholder="Search..." class="srch-bar">
    </div>
    <div class="icon-container">
      <div class="socmed-icon-container">
        <div class="socmed-icon">
          <img src="/Users/ula/Desktop/rootfolder-IFO/img/soc-med-icon-agn.png" class="socmed-icon-img" alt="Social Media">
        </div>
        <div class="socmed-icon-drpdwn-menu">
            <ul class="socmed-drpdwn-list">
              <li class="socmed-item">
                <img src="img/yt-logo.png" alt="YouTube" class="socmed-item-img-yt">
              </li>
              <li class="socmed-item">
                <img src="img/ig-logo.png" alt="Instagram" class="socmed-item-img">
              </li>
              <li class="socmed-item">
                <img src="img/tt-logo.png" class="socmed-item-img" alt="TikTok">
              </li>
            </ul>
        </div>
      </div>
      <div class="shop-icon-container">
        <img src="img/shop-icn.png" class="icon-png" alt="The Shop">
      </div>
      <div class="account-icon-container">
        <img src="img/account-icn.png" class="icon-png" alt="Your Account">
      </div>
    </div>
  </header>

Body:

<div id="index-body">
    <section class="article">
      <div class="article-double-container">
        <div class="image-article-main">
          <a href="autumn-2022.html" class="text-link">read</a>
          <div class="article-text">
              <h2 class="image-article-text">Lorem Ipsum</h2>
              <p> Blah Blah Blah, some stuff here</p>
          </div>
          <img src="/Users/ula/Desktop/rootfolder-IFO/img/IFO-FRONT-PAGE.jpg" class="art-img" alt="Industry for Outsiders front page">
        </div>
        <div class="text-article-main">
          <h2>Lorem Ipsum</h2>
            <h3>Lorem on my Ipsum till i Dolor</h3>
          <p>Blah blah blah, here is where the text wuld go when i finish writing and researching articles</p>
        </div>
      </div>
    </section>
    <section class="article">
      <div class="article-double-container">
        <div class="text-article-secondary">
          <h2>Lorem Ipsum Dolor</h2>
        </div>
        <div class="image-article-secondary">
          <h2>Lorem Ipsum
          </h2>
        </div>
      </div>
    </section>
  </div>

CSS (header):

#l-static-header {
  box-sizing: border-box;
  width: 100%;
  height: 6em;
  padding: .5em 5em;
  display: inline-flex;
  background-color: black;
  position: sticky;
  top: 0;
  border-bottom: #131313 solid 1px;
  z-index: 100;
}

.logo-container {
  display: inline-flex;
  height: auto;
  width: auto;
  padding: 0.5em;
}

.logo-image {
  display: inline-flex;
  height: inherit;
  margin: 0em 1em 0 1em;
}

.logo-png {
  height: inherit;
  width: auto;
}

.logo-title {
  height: inherit;
  width: auto;
}

.logo-title a {
  text-decoration: none;
}

.logo-title a h1:hover {
  color: orange;
}

.header-title {
  color: white;
  font-size: 1.25em;
}

.menu-container {
  width: auto;
  display: inline-flex;
  padding: 0em 1em;
}

.menu-container-text {
  color: white;
  font-size: 1em;
  font-style: italic bold;
  margin: .7em 0.25em 0 -.25em;
}

.menu-container-top {
  display: inline-flex;
  width: inherit;
}

.top-menu-nav {
  display: inline-flex;
  width: inherit;
}

.menu-top {
  display: inline-flex;
  width: inherit;
  margin: .75em 0;
}

.top-menu-item {
  display: inline-block;
  text-align: center;
  list-style: none;
  width: 8em;
  height: 1.5em;
  position: static;
  border-right: solid white 1px;
}

.top-menu-item:hover {
  background-color: #202020;
}

.hover-menu-container-people {
  display: none;
  transition: 4s ease-in-out;
  delay: 1s;
}

.top-menu-item:hover .hover-menu-container-people {
  display: inline-block;
  animation: fade
}

.top-menu-item a {
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
  color: white;
  vertical-align: middle;
}

.top-menu-item a:hover {
  color: orange;
}

.hover-menu{
  display: inline-flex;
  margin: 1.5em 0;
}

.hover-menu-item {
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  list-style: none;
  width: 8em;
  height: 1.75em;
  padding-top: 0.25em;
  border-radius: 1em 1em 1em 1em;
}

.hover-menu-item:hover {
  background-color: #202020;
}

.hover-menu-container-places {
  display: none;
  position: relative;
  left: -8em;
}

.top-menu-item:nth-child(2):hover .hover-menu-container-places {
  display: inline-block;
}

.hover-menu-container-editions {
  display: none;
}

.top-menu-item:nth-child(3):hover .hover-menu-container-editions {
  display: inline-block;
}

.top-menu-item:nth-child(4) {
  border-right: none;
}
.search-bar-container {
  border: solid 1px white;
  margin: 0.7em 0em;
  display: flex;
  height: 1.5em;
  width: 15em;
  border-radius: 1em;
}

input.srch-bar {
  border-radius: 1em;
  padding: .25em;
  width: inherit;
  color: : white;
  background-color: gray;
}

.srch-bar:hover {
  background-color: gray;
}
.icon-container {
  display: inline-flex;
  margin: 0 1em;
  width: inherit;
  padding: .7em 0;
}

.socmed-icon-container {
  display: block;
  justify-content: center;
  border-radius: 2em;
  border: solid 1px #898989;
  width: 4em;
  height: auto;
  margin-right: 1em;
  margin-left: 1em;
  text-align: center;
}

.socmed-icon{
  display: flex;
  justify-content: center;
  height: 3.5em;
  width: 4em;
  padding: 0.5em;
  border-radius: 2em;
  transition: .1s;
}

.socmed-icon-img {
  height: 2.5em;
  width: auto;
  margin-left: -0.25em;
  transition: .1s;
}

.socmed-icon-drpdwn-menu {
  display: none;
  background-color: black;
  height: auto;
  padding: 0.25em .325em;
  border-radius: 2em 2em 2em 2em;
  top: 100%;
  z-index: 999999;
}

.socmed-icon-container:hover .socmed-icon-drpdwn-menu {
  display: block;
}

.socmed-drpdwn-list {
  display: block;
  list-style: none;
  height: auto;
}

.socmed-item {
  display: flex;
  border: solid 1px #454545;
  margin: 0.25em 0 0.25em 0;
  padding: 0.5em;
  border-radius: 2em;
  transition: .5s;
  justify-content: center;
  max-height: 3.5em;
}

.socmed-item:hover {
  background-color: gray;
}

.socmed-item-img{
  width: inherit;
  max-height: 2em;
  padding: 0.25em;
}

.socmed-item-img-yt {
  width: auto;
  max-height: 2.25em;
  padding: 0.5em;
  text-align: center;
  margin-right: -0.1em;
}

.shop-icon-container {
  display: flex;
  justify-content: center;
  border-radius: 2em;
  border: solid 1px #898989;
  padding: 0.5em;
  width: 4em;
  margin-right: 1em;
  margin-left: .5em;
  transition: .1s;
}

.icon-png{
  max-height: 2em;
  width: auto;
  margin-left: -.05em;

}
.account-icon-container {
  display: flex;
  justify-content: center;
  padding: 0.5em;
  border-radius: 2em;
  border: solid 1px #898989;
  width: 4em;
  margin-right: 1em;
  margin-left: .5em;
  transition: .1s;
}

.socmed-icon-container:hover, .account-icon-container:hover, .shop-icon-container:hover {
  background-color: #454545;
}

CSS (body):

#index-body {
  display: block;
  width: inherit;
  box-sizing: border-box;
  height: auto;
  scroll-snap-type: y mandatory;
  justify-content: center;
}
/*1st section*/

.article {
  display: block;
  height: 43em;
  width: 100%;
  justify-content: center;
  scroll-snap-align: start;
  padding: 0 5.5em;
  border: solid 1px red;
}
  .article:nth-of-type(1) {
    background-image:linear-gradient(black,gray);
  }
  .article:nth-of-type(2) {
    background-image:linear-gradient(gray,navy);
  }
  .article:nth-of-type(3) {
    background-image:linear-gradient(navy,gray);
  }

I didn't include all the body code, since most of it is likely irrelvant to this issue.

score 0 · Answer 1 · edited May 04 '23 at 15:35

0

With scroll-margin, inside the div you need to align and you need to add to the margin the size of your nav-bar:

scroll-margin: 18svh;

edited May 04 '23 at 15:35

André

1,602
2
12
26

answered May 04 '23 at 00:02

SrGnico

1

Scroll-snap not working - is it because the header above the elements doesn't allow it to snap to "start"?

1 Answers1