css 滚动-捕捉不工作-是因为元素上方的标题不允许它捕捉到“开始”吗？

我正在为一个个人项目建立一个网站，并希望在页面的主体部分（低于标题）管理单元开始时，垂直滚动。我已经分别在父div和子div中包含了必要的代码，但是在滚动时我没有看到任何区别。我想这可能是因为头部以某种方式破坏了这段代码？
我将包括头代码以及父/子div代码，以防万一（出于版权目的，我已经更改了文本，因此请原谅站点的不一致性。）
如果标题代码不相关，则跳到正文Html和CSS
谢谢！
Codepen：https://codepen.io/qwaliy/pen/KKoWpxV
标题：

<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>

身体：

<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);
  }

我没有包括所有的主体代码，因为大部分代码可能与这个问题无关。

css 滚动-捕捉不工作-是因为元素上方的标题不允许它捕捉到“开始”吗？

1条答案

相关问题

热门标签

最新问答