goal:
when open overlay, webpage's scroll (not overlay's scroll) should visible not active use.
problem:
irritated see page moves right side when invisible scroll , when visible scroll page moves right side in relation overlay.
is there way it?
thanks!
function opennav() { document.getelementbyid("mynav").style.height = "100%"; $('body').addclass('noscroll'); } function closenav() { document.getelementbyid("mynav").style.height = "0%"; $('body').removeclass('noscroll'); }body { margin: 0; font-family: 'lato', sans-serif; } .overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.8); overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 10%; width: 70%; text-align: left; margin: 30px auto; background: white; overflow-y: auto; height: 100%; } .overlay { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } .noscroll { overflow: hidden; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mynav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closenav()">×</a> <div class="overlay-content"> <a href="#">about</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">contact</a> <a href="#">about</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">contact</a> <a href="#">about</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">contact</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">contact</a> <a href="#">about</a> <a href="#">services</a> <a href="#">about</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">candy</a> </div> </div> <h2>fullscreen overlay nav example</h2> <p>click on element below open fullscreen overlay navigation menu.</p> <p>in example, navigation menu slide downwards top:</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <span style="font-size:30px;cursor:pointer" onclick="opennav()">☰ open</span> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
just add "position: fixed; overflow-y:scroll" no scroll class.
if don't want go top, current x position based on body's current scroll , set y offset that
function opennav() { document.getelementbyid("mynav").style.height = "100%"; $(document).scrolltop() $('body').addclass('noscroll'); } function closenav() { document.getelementbyid("mynav").style.height = "0%"; $('body').removeclass('noscroll'); $('body').scroll(function() { alert("scroll") }); }body { margin: 0; font-family: 'lato', sans-serif; overflow-y: scroll; } .overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.8); overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 10%; width: 70%; text-align: left; margin: 30px auto; background: white; overflow-y: auto; height: 100%; } .overlay { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } .noscroll { position: fixed; overflow-y:scroll; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mynav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closenav()">×</a> <div class="overlay-content"> <a href="#">about</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">contact</a> <a href="#">about</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">contact</a> <a href="#">about</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">contact</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">contact</a> <a href="#">about</a> <a href="#">services</a> <a href="#">about</a> <a href="#">services</a> <a href="#">clients</a> <a href="#">candy</a> </div> </div> <h2>fullscreen overlay nav example</h2> <p>click on element below open fullscreen overlay navigation menu.</p> <p>in example, navigation menu slide downwards top:</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <span style="font-size:30px;cursor:pointer" onclick="opennav()">☰ open</span> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
Comments
Post a Comment