位置粘性不起作用答案

【问题标题】：position sticky not working位置粘性不起作用
【发布时间】：2017-08-29 17:57:04
【问题描述】：

我试图在向下滚动网页时粘贴一段文字，但它似乎不起作用。我给它这个css：

.left {
    position: sticky; /* doesnt work :( */
    top: 0px;
}

这里是完整代码：http://jsfiddle.net/YYPKM/3281/

此 div 位于包装器的左侧，但我希望右侧滚动而左侧粘在 div 的顶部。我已经尝试过很多方法，比如固定位置，但这似乎是最好的选择，我就是无法让位置保持稳定。

有谁知道我做错了什么？

【问题讨论】：

.wrapper's display:flex 导致问题
你可以试试显示：table;如果这符合您的布局需求：jsfiddle.net/YYPKM/3284
谢谢你，如果你发布了，我会接受^

标签： html css sticky

【解决方案1】：

我认为使用display: table 并不能真正解决问题。

您只需添加align-self: flex-start; 即可将弹性框元素的高度设置为auto。

.left {
  position: sticky;
  top: 0;
  align-self: flex-start;
}

【讨论】：

【解决方案2】：

问题在于父级被视为弹性容器，它使子级弹性项目。现在项目显示为弹性项目，它停止工作。如果你从包装器中删除display:flex，它就可以工作。

【讨论】：

什么是保持数字在右侧的最佳方法
您可以使用display:inlineblock; width:50%;，父级应该有position:relative and height 100%。我不知道那是否行得通。我会在空闲时间尝试一下

【解决方案3】：

为.left 和.right 指定所需的宽度
将float: left 添加到.left
将.right 的内边距设置为.left 的宽度

在这里查看小提琴： http://jsfiddle.net/YYPKM/3283/

【讨论】：

如果我不知道所需的宽度怎么办

【解决方案4】：

一个选项可以是使用display:table; 进行类似的布局：

.wrapper {
  display: table;
}

.description {
  margin-bottom: 50px;
}

.left {
  box-shadow: 0 0 0 5px;
  margin-right: 50px;
  position: sticky;
  /* doesnt work :( if display:table-cell or flex  is set or if it is a flex child */
  position: -webkit-sticky;
  top: 0;
}
.right{
  display:table-cell;/*NOTE: do not emulate display on .left */
}
.right,
.left {/*see me*/
  box-shadow: 0 0  5px;
}

<body>
  <h2>
    TITLE
  </h2>
  <div class='description'>
    Some words to describe this awesome web page
  </div>
  <div class="wrapper">
    <div class="left">
      want to keep this text all the way down
    </div>
    <div class="right">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
      <div>16</div>
      <div>17</div>
      <div>18</div>
      <div>19</div>
      <div>20</div>
      <div>21</div>
      <div>22</div>
      <div>23</div>
      <div>24</div>
      <div>25</div>
      <div>26</div>
      <div>27</div>
      <div>28</div>
      <div>29</div>
      <div>30</div>
      <div>31</div>
      <div>32</div>
      <div>33</div>
      <div>34</div>
      <div>35</div>
      <div>36</div>
      <div>37</div>
      <div>38</div>
      <div>39</div>
      <div>40</div>
      <div>41</div>
      <div>42</div>
      <div>43</div>
      <div>44</div>
      <div>45</div>
      <div>46</div>
      <div>47</div>
      <div>48</div>
      <div>49</div>
      <div>50</div>
    </div>
  </div>
</body>

也可以在这里解决http://jsfiddle.net/YYPKM/3284/

【讨论】：