Question

我正在制作一个博客网站示例，我想在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>

这是JavaScript代码。

window.onscroll = function () {
            myFunction();
        };

        var header = document.getElementById("post-author");
        var sticky = header.offsetTop;

        function myFunction() {
            if (window.pageYOffset > sticky) {
                header.classList.add("sticky");
            } else {
                header.classList.remove("sticky");
            }
        }

粘性类定义为：

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

问题是div固定，但是width of the div changes and it gets shrinked.
我不知道为什么会这样，最近两天我一直坚持下去。

您可以看到示例Here

Answer 1

您的问题是添加了包含sticky属性的position: fixed;类。

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

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

编辑

固定

该元素已从常规文档流中删除，并且没有空格为页面布局中的元素创建的。它相对定位到视口建立的初始包含块，除非当其祖先之一具有变换，透视图或过滤器时属性设置为非空（请参阅CSS变换）规格），在这种情况下，祖先将作为包含块。（请注意，浏览器与透视图和过滤器有助于形成积木。）其最终位置由上，右，下和左的值确定。这个值始终会创建一个新的堆栈上下文。在印刷文件中，元素在每一页上都放置在同一位置。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

position:fixed从文档的正常流程中删除该元素。并且由于具有自动宽度，因此其宽度会发生变化。给它一个固定的宽度。

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

在这里https://css-tricks.com/almanac/properties/p/position/

了解更多

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

2 个答案: