粘滞栏我无法追踪的问题。我需要指导

Question

我的粘性标签粘不住。我已经编辑了 CSS，调整了它并逐行检查了所有代码，但我似乎没有看到问题。所有浏览器都不会显示它，但我不确定是什么禁止它显示。

请看下面的代码

<div class="sticky-tabs"> 
<ul class="tabs-nav"> 
<li><a href="#why-it-matters">Why It Matters</a></li> <li><a href="#Resources">Resources</a></li> <li><a href="#What-we-do">Our Approach</a></li> <li><a href="#Policy-center">Our Policies</a></li> <li><a href="#Take-action">Get Involved</a></li> </ul> </div> </div> 
<div class="content-column"> 
<div id="main" tabindex="-1" role="main" class="main"> ``` 
And below is part of my CSS Code that addresses the stick ```
 .sticky-tabs {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0; /* Adjust this value to your needs */
  z-index: 1000; /* Ensure it appears above other elements */
  padding: 10px 0; /* Optional: Adjust padding */
}

我尝试通过禁用脚本来排除故障，但是这不起作用。无法追踪问题。如果有代码我可以用来绕过这个问题，无论它来自不是一个插件，那会非常有帮助我也尝试过在另一个浏览器中使用该代码，但它不起作用，但是一个没有 CSS 的页面主文件会粘住。

代码超出了这里的限制。

Answer 1

乍一看我发现了两个问题。

1. 您与代码的其他部分有冲突。
2. 请记住，

   sticky

   元素的本质还在于它们必须有一个可以粘的地方...换句话说，装有内容的容器应该具有正确的高度或具有正确的内容量。

尝试操纵

height

的

container

...

看一下

body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    height: 200vh;
}

.sticky-tabs {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #fff;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    z-index: 1000;
}

.tabs-nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.tabs-nav li {
    display: inline;
    margin-right: 15px;
}

.content-column {
    padding: 20px;
}

.section {
    height: 600px;
    border-bottom: 1px solid #ddd;
}

 <div class="container">
        <div class="sticky-tabs">
            <ul class="tabs-nav">
                <li><a href="#why-it-matters">Why It Matters</a></li>
                <li><a href="#Resources">Resources</a></li>
                <li><a href="#What-we-do">Our Approach</a></li>
                <li><a href="#Policy-center">Our Policies</a></li>
                <li><a href="#Take-action">Get Involved</a></li>
            </ul>
        </div>
        <div class="content-column">
            <div id="why-it-matters" class="section">Why It Matters</div>
            <div id="Resources" class="section">Resources</div>
            <div id="What-we-do" class="section">Our Approach</div>
            <div id="Policy-center" class="section">Our Policies</div>
            <div id="Take-action" class="section">Get Involved</div>
        </div>
    </div>