問題
position: sticky
がうまくいかない。
現状
html
1<div class="wrap"> <!-- 付いてきてほしい所 --> 2 3<!-- スライドバー --> 4<div id="filter"> 5 <input type="range" name="page" orient="vertical" step="20" list="pagelist" /> 6 <datalist class="pagelist"> 7 <option value="1"></option> 8 <option value="2"></option> 9 <option value="3"></option> 10 <option value="4"></option> 11 <option value="5"></option> 12 </datalist> 13</div> <!-- /スライドバー --> 14 15<!-- 一覧(他要素) --> 16 <div class="list"> 17 <section class="item"> 18~ 19 </section> 20 <section class="item"> 21~ 22 </section> 23 <section class="item"> 24~ 25 </section> 26 </div> <!-- /一覧(他要素) --> 27</div> <!-- /付いてきてほしい所 -->
↑つまり、他要素の「一覧」の所でスライドバーが付いてきてほしい
css
1/* 一覧 */ 2.wrap { 3 width: 100%; 4 height: 1421px; /* 「listの終わりまで」にしたい */ 5} 6 7/* 【 スライドバー 】 */ 8input[type=range]:focus { 9 outline: none; 10} 11#filter input[type=range][orient=vertical] { 12 writing-mode: bt-lr; /* IE */ 13 -webkit-appearance: none; 14 width: 196px; 15 position: sticky; 16 position: -webkit-sticky; 17 top: 100px; /* 上下の真ん中に置きたい */ 18 -webkit-transform:rotate(90deg); 19 -moz-transform:rotate(90deg); 20 -o-transform:rotate(90deg); 21 transform:rotate(90deg); /* 90度回転 */ 22} 23/* Chrome */ 24#filter input[type=range]::-webkit-slider-runnable-track { 25 height: 13px; 26 background: url('img/jiku.svg'); 27 /* position: absolute; */ 28} 29#filter input[type="range"]::-webkit-slider-thumb { 30 -webkit-appearance: none; 31 width: 16.739px; 32 height: 35px; 33 margin-top: -11px; 34 background: url('img/botan.svg') no-repeat center center; 35 /* position: absolute; */ 36} 37/* Firefox */ 38#filter input[type=range]::-moz-range-track { 39 height: 13px; 40 background: url('img/jiku.svg'); 41 /* position: absolute; */ 42} 43#filter input[type="range"]::-moz-range-thumb { 44 width: 16.739px; 45 height: 35px; 46 margin-top: -11px; 47 background: url('img/botan.svg') no-repeat center center; 48 /* position: absolute; */ 49}
potision: absolute;
するとスライドバー自体が消えてしまうので、今は一応コメントアウトしてます。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー