位置粘性不起作用
position sticky not working
我试图在向下滚动网页时粘贴一段文字,但它似乎不起作用。我给它 css:
.left {
position: sticky; /* doesnt work :( */
top: 0px;
}
完整代码如下:http://jsfiddle.net/YYPKM/3281/
这个 div 在包装纸的左侧,但我希望右侧滚动,左侧贴在 div 的顶部。我已经尝试了很多东西,比如位置固定,但这似乎是最好的选择,我就是无法让位置固定工作。
有谁知道我做错了什么吗?
问题是父项被视为弹性容器,它使子项成为弹性项目。现在项目显示为弹性项目,它停止工作。如果您从包装器中删除 display:flex
,它会起作用。
- 为
.left
和 .right
指定所需的宽度
- 将
float: left
添加到 .left
- 将
.right
的内边距设置为 .left
的宽度
在此处查看 fiddle:
http://jsfiddle.net/YYPKM/3283/
一种选择是使用 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/
我认为使用 display: table
并不能真正解决问题。
您只需添加 align-self: flex-start;
即可将 flexbox 元素的高度设置为 auto
。
.left {
position: sticky;
top: 0;
align-self: flex-start;
}
我试图在向下滚动网页时粘贴一段文字,但它似乎不起作用。我给它 css:
.left {
position: sticky; /* doesnt work :( */
top: 0px;
}
完整代码如下:http://jsfiddle.net/YYPKM/3281/
这个 div 在包装纸的左侧,但我希望右侧滚动,左侧贴在 div 的顶部。我已经尝试了很多东西,比如位置固定,但这似乎是最好的选择,我就是无法让位置固定工作。
有谁知道我做错了什么吗?
问题是父项被视为弹性容器,它使子项成为弹性项目。现在项目显示为弹性项目,它停止工作。如果您从包装器中删除 display:flex
,它会起作用。
- 为
.left
和.right
指定所需的宽度
- 将
float: left
添加到.left
- 将
.right
的内边距设置为.left
的宽度
在此处查看 fiddle: http://jsfiddle.net/YYPKM/3283/
一种选择是使用 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/
我认为使用 display: table
并不能真正解决问题。
您只需添加 align-self: flex-start;
即可将 flexbox 元素的高度设置为 auto
。
.left {
position: sticky;
top: 0;
align-self: flex-start;
}