#css #wordpress #sticky
Вопрос:
Я битый час боролся с этой страницей, пытаясь заставить div, содержащий линейку (примерно на полпути вниз по странице), оставаться липким при прокрутке вниз. http://thepostrider.com/mockup-demo / — это страница.
Все это проработано в jsfiddle (https://jsfiddle.net/6gcq9vkm /) но я пытался удалить overflow:hidden и т.д. со страницы в течение нескольких часов, но безуспешно. Есть ли у кого-нибудь какие-либо идеи, что может препятствовать перемещению липкого элемента при прокрутке страницы?
<style>
svg {overflow: visible !important;}
.rulerdiv {position: sticky; top: 10px;}
</style>
<div class="superforecast" >
<div class="rulerdiv">
<svg class="ruler" version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,284,16"><g id="1 cm. Tick Group" fill="none" fill-rule="nonzero" stroke="none" stroke-width="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,0v14.17323" id="1 cm. Tick no. 0" fill="none" stroke="#000000" stroke-width="1"/><text x="2" y="15.17323" id="1 cm. label no. 0" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">0%</text><path d="M28.34646,0v14.17323" id="1 cm. Tick no. 1" fill="none" stroke="#000000" stroke-width="1"/><text x="18.34646" y="15.17323" id="1 cm. label no. 1" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">10</text><path d="M56.69291,0v14.17323" id="1 cm. Tick no. 2" fill="none" stroke="#000000" stroke-width="1"/><text x="46.69291" y="15.17323" id="1 cm. label no. 2" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">20</text><path d="M85.03937,0v14.17323" id="1 cm. Tick no. 3" fill="none" stroke="#000000" stroke-width="1"/><text x="75.03937" y="15.17323" id="1 cm. label no. 3" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">30</text><path d="M113.38583,0v14.17323" id="1 cm. Tick no. 4" fill="none" stroke="#000000" stroke-width="1"/><text x="103.38583" y="15.17323" id="1 cm. label no. 4" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">40</text><path d="M141.73228,0v14.17323" id="1 cm. Tick no. 5" fill="none" stroke="#000000" stroke-width="1"/><text x="131.73228" y="15.17323" id="1 cm. label no. 5" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">50</text><path d="M170.07874,0v14.17323" id="1 cm. Tick no. 6" fill="none" stroke="#000000" stroke-width="1"/><text x="159.07874" y="15.17323" id="1 cm. label no. 6" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">60</text><path d="M198.4252,0v14.17323" id="1 cm. Tick no. 7" fill="none" stroke="#000000" stroke-width="1"/><text x="187.4252" y="15.17323" id="1 cm. label no. 7" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">70</text><path d="M226.77165,0v14.17323" id="1 cm. Tick no. 8" fill="none" stroke="#000000" stroke-width="1"/><text x="215.77165" y="15.17323" id="1 cm. label no. 8" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">80</text><path d="M255.11811,0v14.17323" id="1 cm. Tick no. 9" fill="none" stroke="#000000" stroke-width="1"/><text x="244.11811" y="15.17323" id="1 cm. label no. 9" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="start">90</text><path d="M283.46457,0v14.17323" id="1 cm. Tick no. 10" fill="none" stroke="#000000" stroke-width="1"/><text x="282.46457" y="15.17323" id="1 cm. label no. 10" fill="#000000" stroke="none" stroke-width="1" font-family="century" font-weight="bold" font-size="7" text-anchor="end">100%</text></g><g id="1/10th cm. Tick Group" fill="none" fill-rule="nonzero" stroke="#000000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M2.83465,0v7.08661" id="1/10th cm. Tick no. 1"/><path d="M5.66929,0v7.08661" id="1/10th cm. Tick no. 2"/><path d="M8.50394,0v7.08661" id="1/10th cm. Tick no. 3"/><path d="M11.33858,0v7.08661" id="1/10th cm. Tick no. 4"/><path d="M14.17323,0v7.08661" id="1/10th cm. Tick no. 5"/><path d="M17.00787,0v7.08661" id="1/10th cm. Tick no. 6"/><path d="M19.84252,0v7.08661" id="1/10th cm. Tick no. 7"/><path d="M22.67717,0v7.08661" id="1/10th cm. Tick no. 8"/><path d="M25.51181,0v7.08661" id="1/10th cm. Tick no. 9"/><path d="M31.1811,0v7.08661" id="1/10th cm. Tick no. 11"/><path d="M34.01575,0v7.08661" id="1/10th cm. Tick no. 12"/><path d="M36.85039,0v7.08661" id="1/10th cm. Tick no. 13"/><path d="M39.68504,0v7.08661" id="1/10th cm. Tick no. 14"/><path d="M42.51969,0v7.08661" id="1/10th cm. Tick no. 15"/><path d="M45.35433,0v7.08661" id="1/10th cm. Tick no. 16"/><path d="M48.18898,0v7.08661" id="1/10th cm. Tick no. 17"/><path d="M51.02362,0v7.08661" id="1/10th cm. Tick no. 18"/><path d="M53.85827,0v7.08661" id="1/10th cm. Tick no. 19"/><path d="M59.52756,0v7.08661" id="1/10th cm. Tick no. 21"/><path d="M62.3622,0v7.08661" id="1/10th cm. Tick no. 22"/><path d="M65.19685,0v7.08661" id="1/10th cm. Tick no. 23"/><path d="M68.0315,0v7.08661" id="1/10th cm. Tick no. 24"/><path d="M70.86614,0v7.08661" id="1/10th cm. Tick no. 25"/><path d="M73.70079,0v7.08661" id="1/10th cm. Tick no. 26"/><path d="M76.53543,0v7.08661" id="1/10th cm. Tick no. 27"/><path d="M79.37008,0v7.08661" id="1/10th cm. Tick no. 28"/><path d="M82.20472,0v7.08661" id="1/10th cm. Tick no. 29"/><path d="M87.87402,0v7.08661" id="1/10th cm. Tick no. 31"/><path d="M90.70866,0v7.08661" id="1/10th cm. Tick no. 32"/><path d="M93.54331,0v7.08661" id="1/10th cm. Tick no. 33"/><path d="M96.37795,0v7.08661" id="1/10th cm. Tick no. 34"/><path d="M99.2126,0v7.08661" id="1/10th cm. Tick no. 35"/><path d="M102.04724,0v7.08661" id="1/10th cm. Tick no. 36"/><path d="M104.88189,0v7.08661" id="1/10th cm. Tick no. 37"/><path d="M107.71654,0v7.08661" id="1/10th cm. Tick no. 38"/><path d="M110.55118,0v7.08661" id="1/10th cm. Tick no. 39"/><path d="M116.22047,0v7.08661" id="1/10th cm. Tick no. 41"/><path d="M119.05512,0v7.08661" id="1/10th cm. Tick no. 42"/><path d="M121.88976,0v7.08661" id="1/10th cm. Tick no. 43"/><path d="M124.72441,0v7.08661" id="1/10th cm. Tick no. 44"/><path d="M127.55906,0v7.08661" id="1/10th cm. Tick no. 45"/><path d="M130.3937,0v7.08661" id="1/10th cm. Tick no. 46"/><path d="M133.22835,0v7.08661" id="1/10th cm. Tick no. 47"/><path d="M136.06299,0v7.08661" id="1/10th cm. Tick no. 48"/><path d="M138.89764,0v7.08661" id="1/10th cm. Tick no. 49"/><path d="M144.56693,0v7.08661" id="1/10th cm. Tick no. 51"/><path d="M147.40157,0v7.08661" id="1/10th cm. Tick no. 52"/><path d="M150.23622,0v7.08661" id="1/10th cm. Tick no. 53"/><path d="M153.07087,0v7.08661" id="1/10th cm. Tick no. 54"/><path d="M155.90551,0v7.08661" id="1/10th cm. Tick no. 55"/><path d="M158.74016,0v7.08661" id="1/10th cm. Tick no. 56"/><path d="M161.5748,0v7.08661" id="1/10th cm. Tick no. 57"/><path d="M164.40945,0v7.08661" id="1/10th cm. Tick no. 58"/><path d="M167.24409,0v7.08661" id="1/10th cm. Tick no. 59"/><path d="M172.91339,0v7.08661" id="1/10th cm. Tick no. 61"/><path d="M175.74803,0v7.08661" id="1/10th cm. Tick no. 62"/><path d="M178.58268,0v7.08661" id="1/10th cm. Tick no. 63"/><path d="M181.41732,0v7.08661" id="1/10th cm. Tick no. 64"/><path d="M184.25197,0v7.08661" id="1/10th cm. Tick no. 65"/><path d="M187.08661,0v7.08661" id="1/10th cm. Tick no. 66"/><path d="M189.92126,0v7.08661" id="1/10th cm. Tick no. 67"/><path d="M192.75591,0v7.08661" id="1/10th cm. Tick no. 68"/><path d="M195.59055,0v7.08661" id="1/10th cm. Tick no. 69"/><path d="M201.25984,0v7.08661" id="1/10th cm. Tick no. 71"/><path d="M204.09449,0v7.08661" id="1/10th cm. Tick no. 72"/><path d="M206.92913,0v7.08661" id="1/10th cm. Tick no. 73"/><path d="M209.76378,0v7.08661" id="1/10th cm. Tick no. 74"/><path d="M212.59843,0v7.08661" id="1/10th cm. Tick no. 75"/><path d="M215.43307,0v7.08661" id="1/10th cm. Tick no. 76"/><path d="M218.26772,0v7.08661" id="1/10th cm. Tick no. 77"/><path d="M221.10236,0v7.08661" id="1/10th cm. Tick no. 78"/><path d="M223.93701,0v7.08661" id="1/10th cm. Tick no. 79"/><path d="M229.6063,0v7.08661" id="1/10th cm. Tick no. 81"/><path d="M232.44094,0v7.08661" id="1/10th cm. Tick no. 82"/><path d="M235.27559,0v7.08661" id="1/10th cm. Tick no. 83"/><path d="M238.11024,0v7.08661" id="1/10th cm. Tick no. 84"/><path d="M240.94488,0v7.08661" id="1/10th cm. Tick no. 85"/><path d="M243.77953,0v7.08661" id="1/10th cm. Tick no. 86"/><path d="M246.61417,0v7.08661" id="1/10th cm. Tick no. 87"/><path d="M249.44882,0v7.08661" id="1/10th cm. Tick no. 88"/><path d="M252.28346,0v7.08661" id="1/10th cm. Tick no. 89"/><path d="M257.95276,0v7.08661" id="1/10th cm. Tick no. 91"/><path d="M260.7874,0v7.08661" id="1/10th cm. Tick no. 92"/><path d="M263.62205,0v7.08661" id="1/10th cm. Tick no. 93"/><path d="M266.45669,0v7.08661" id="1/10th cm. Tick no. 94"/><path d="M269.29134,0v7.08661" id="1/10th cm. Tick no. 95"/><path d="M272.12598,0v7.08661" id="1/10th cm. Tick no. 96"/><path d="M274.96063,0v7.08661" id="1/10th cm. Tick no. 97"/><path d="M277.79528,0v7.08661" id="1/10th cm. Tick no. 98"/><path d="M280.62992,0v7.08661" id="1/10th cm. Tick no. 99"/></g>
</svg>Test</div>
<svg viewbox="0 0 284 1000" width="100%" height="100%">
<line x1="50%" y1="0" x2="50%" y2="300"
style="stroke-width: 2; stroke: red;"/>
<line x1="50%" y1="300" x2="85%" y2="300"
style="stroke-width: 2; stroke: red;"/>
<line x1="85%" y1="300" x2="85%" y2="500"
style="stroke-width: 2; stroke: red;"/>
<line x1="85%" y1="500" x2="20%" y2="500"
style="stroke-width: 2; stroke: red;"/>
<line x1="20%" y1="500" x2="20%" y2="700"
style="stroke-width: 2; stroke: red;"/>
<line x1="20%" y1="700" x2="72%" y2="700"
style="stroke-width: 2; stroke: red;"/>
<line x1="72%" y1="700" x2="72%" y2="800"
style="stroke-width: 2; stroke: red;"/>
</svg><div>