html - How do I make my toggle button scroll up slightly when I scroll down the page? -
i making website have multiple pages , each page potentially long @ first wanted way have access menus , stuff in sidebar. changed nav isn't fixed more , scrolling down page looks weird because toggle quite low down page (due being below nav @ top of page). sow how toggle, sidebar , content scroll top of page , have both toggle , sidebar become fixed content side being scrolled?.
it may simple solution cant think of how , solution find this, looks quite bit little right?
this have @ moment
html, body { margin: 0; padding: 0; border: 0; } { display: inline-block; padding: 1em; text-decoration: none; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 0 5px 5px 0; } #a, #b { position: absolute; transition: 700ms; } #a { top: 0px; width: 200px; bottom: 0px; background: orange; } #b { top: 0px; left: 200px; right: 0; bottom: 0px; background: green; } /*hide checkbox*/ #toggle { display: none; } label { position: relative; /*set left position same sidebar */ left: 200px; top: 100px; margin: 5px; z-index: 2; transition: 700ms; background: #fff; padding: 4px 6px; background: orange; } /* initial sidebar state */ #toggle ~ #a { left: 0; } /*move both containers on toggle*/ #toggle:checked ~ #a, #toggle:checked ~ #b { left: -200px; } /*move label follow sidebar animation*/ #toggle:checked, #toggle:checked ~ label { left: 0; background: #fff; }
<div id="a"></div> <input id="toggle" type="checkbox"> <label for="toggle">menu</label> <div id="b"></div>
Comments
Post a Comment