Javascript 到达顶部后，div的宽度会发生变化

我正在做一个博客网站的例子，我想在div到达页面顶部后修复它的位置。我正在使用materialize.css
这是我的密码

 <div class="row">
     <div class="col m8 s12">
     <!-- some content here -->
     </div>

    <div class="col s12 m4">
                    <div class="collection with-header" style="margin-top:3rem;">
                        <h5 class="collection-item">Trending topics</h5>
                        <a href="#" class="collection-item">Web design</a>
                        <a href="#" class="collection-item">Express framework</a>
                        <a href="#" class="collection-item">Cache API</a>
                        <a href="#" class="collection-item">Event handling in JavaScript</a>
                        <a href="#" class="collection-item">Django framework</a>
                    </div>

    <!-- This div should be fixed after reaching the top -->
                    <div class="card-panel center" id="post-author" style="width:auto">
                        <div class="follow-author">
                            <img src="https://source.unsplash.com/random/200x200" alt="" class="responsive-img circle"
                                style="width:75px;">
                            <div class="blue-text darken-3">Ishaan Sheikh</div>
                            <small class="grey-text">@sheikh_i</small>
                            <div class="divider" style="margin:1rem 0;"></div>
                            <div class="grey-text">Follow Author </div>
                            <a href="#"><i class="fab fa-facebook"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-github"></i></a>
                         </div>
                    </div>
     </div>
 </div>

粘性类定义为：

.sticky {
            position: fixed;
            top: 0;
        }

问题是div得到了修复，但是div的

宽度发生了变化，并且变小了。

我不知道为什么会发生这种事，我在过去的两天里一直被这种事困扰着

---

您可以看到示例

您的问题是添加了

sticky

类，该类包含

位置：fixed属性

fixed
有效地从列中删除div，因此，
width:auto
现在的工作方式不同了

您需要使用固定宽度重新设计列

编辑

固定的

元素将从正常文档流中删除，并且不保留任何空间
为页面布局中的元素创建。它是相对定位的
到视口建立的初始包含块，除了
当其祖先之一具有变换、透视或过滤器时
属性设置为none以外的值（请参见CSS转换
Spec），在这种情况下，祖先的行为就像包含块一样。
（请注意，浏览器与透视图和
有助于抑制堵塞形成的过滤器）及其最终位置
由顶部、右侧、底部和左侧的值确定。这
值始终创建新的堆叠上下文。在印刷文件中
元素在每个页面上放置在相同的位置

位置：固定
从文档的正常流程中删除元素。因为它有自动宽度，所以它的宽度会改变。给它一个固定的宽度

.sticky {
  position: fixed;
  top: 0;
  width: 321px;
}

请在此处阅读更多内容
因为您有宽度自动-为它指定与
s12
和
m4
类相同的宽度，这样它将保持列的宽度i添加的宽度：粘滞类的100%，但它不起作用。
位置：fixed
从文档的正常流中删除元素。由于它具有自动宽度

，其宽度会发生变化。给它一个固定的宽度。这是因为100%不是m4的大小（这只适用于小屏幕，因为它等同于sm12）。如果你打算使用一个框架，就要了解它是如何正常工作的。

位置：fixed

必须指定

宽度

，否则它将始终具有自动宽度。@Ishaan-您的列的宽度为百分比。但问题是

位置：已修复

。看看我的编辑，这不是一个片段。你想添加一个代码示例吗？我同意@johny04501。所有列都以百分比作为宽度。如果调整窗口的大小，列的宽度将改变，但是

.sticky

不会改变t@johnny04501我同意你们两个。我不认为他打算在小屏幕的顶部保留粘性元素。(:

.sticky {
  position: fixed;
  top: 0;
  width: 321px;
}