位置：粘性不適用於頂級屬性？

Question

位置：粘底：10px在div上，類邊欄正在按預期工作但是屬性頂部：10px沒有按預期工作？

使用位置：粘貼底部：帶有類側邊欄的div上10px，當我們向下滾動div棒以查看端口高於10px的端口到視口時。

類似於位置：粘貼頂部：帶有類側邊欄的div上的10px，當我們向上滾動時，div應該粘貼到頂部，其中div 10px的頂部邊緣位於視口下方。

但它不是這樣工作，問題是什么？

代碼： https ： //jsfiddle.net/c7vxwc7g/

 .container{ /*width: 1654px;*/ width: 100%; background-color: #f0f0f0; margin: 0 auto; } .sidebar{ position: sticky; bottom: 10px; width: 400px; margin: 5px; background-color: teal; height: 1000px; display: inline-block; } .mainpage{ width: 1130px; margin: 5px; margin-left: 0px; background-color: steelblue; height: 6000px; display: inline-block; } .footer{ height: 500px; width: 1654; margin: 0 auto; margin-top: 10px; background-color: purple } .test1{ background-color: red; position: relative; left: 0; right: 0; top: 0; height: 200px; } .test2{ background-color: red; position: relative; left: 0; right: 0; bottom: 0; height: 200px; }

 <body> <div class="container"> <div class="sidebar"> <div class="test1">test1</div> <div class="test2">test2</div> </div> <div class="mainpage">mainpage</div> </div> <div class="footer">footer</div> </body>

Answer 1

在我的例子中，粘性元素（側邊欄）的父級高度小於內容=>粘性元素的下降不會超過側邊欄的高度。

解決方案：我使側邊欄的高度等於內容的高度（在內容和側邊欄的包裝上使用display flex）。

HTML：

<div clas="container">
    <div class="content">This initially has a bigger height than sidebar.</div>
    <div class="sidebar">
        <div class="sticky"></div>
    </div>
</div>

CSS：

.container { dislay: flex; } // By using this I make the sidebar the same height as the content
.sticky { position: sticky; top: 0; }

位置：粘性不適用於頂級屬性？

問題描述

1 個解決方案

解決方案1
1 2019-02-14 13:03:52

位置：粘性不適用於頂級屬性？

問題描述

1 個解決方案

解決方案1 1 2019-02-14 13:03:52

解決方案1
1 2019-02-14 13:03:52