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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -