ウェブページをスクロールしながらテキストを貼り付けようとしていますが、動作しないようです。私はそれを、このCSSを与える：位置が固定されていない
.left {
position: sticky; /* doesnt work :(*/
top: 0px;
}
ここでは完全なコードされていますhttp://jsfiddle.net/YYPKM/3281/
これは、DIVがラッパーの左側にあるが、私はスクロールし、左右のdiv要素の上部に固執したいです。私は位置固定のような多くのことを試しましたが、これは最善の選択肢と思われます、私はちょうど働くことに固執することができません。
誰かが私が間違っていることを知っていますか？
私は実際に問題を解決していませんdisplay: tableを使用してだと思います。
フレックスボックス要素の高さをautoに設定するには、align-self: flex-start;を追加するだけです。
.left {
position: sticky;
top: 0;
align-self: flex-start;
}
問題は、親がフレックスコンテナとして扱われ、子供のフレックスアイテムとなることです。アイテムがフレックスアイテムとして表示されるようになり、作業が停止します。ラッパーからdisplay:flexを削除すると、それが機能します。
.leftのため、ご希望の幅を指定し、.rightはfloat: left.leftから.rightの幅チェックアウトここでフィドルのパディング.leftに「追加： http://jsfiddle.net/YYPKM/3283/
もし私が希望の幅を知らないなら – rishubk
オプション同様のレイアウトのための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/
。ラッパーの表示：フレックスは問題を引き起こしています –
あなたは表示しようとするかもしれません。それはあなたのレイアウトのニーズに合っている場合：http://jsfiddle.net/YYPKM/3284/ –
ありがとう、私はそれを受け入れるだろう^あなたがそれを投稿した場合 – rishubk