I'm building a off-canvas push menu and everything is working, there are a few aspects I can't seem to figure out.
How to disable the scrolling of the content-wrapper.
How to only scroll the off canvas menu. Right now it scrolls the height of the website itself.
Here is a code pen to show you what issues I'm running into.
HTML
<div id="menu">
<h1>This is the push over menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias id accusantium, consequatur, repellendus iure impedit consectetur aspernatur quas quo. Doloremque, facere autem ex tempora dicta consequuntur, possimus minima natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quis voluptatibus, nesciunt debitis ea ullam consectetur illo cum odit nobis explicabo cumque, vitae quia dolores, fugit maxime ad nisi earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatibus dignissimos possimus, voluptatem ducimus illum voluptate deleniti et culpa autem laboriosam, pariatur voluptates enim facilis, animi nesciunt dolor expedita repellat.</p>
</div>
<div id="burger-icon">
<h2>burger menu</h2>
</div>
<div id="content-wrapper">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ullam, alias dignissimos dolore, a ratione dicta ipsam delectus facilis quod voluptates autem beatae sed impedit eligendi, consequuntur necessitatibus modi nemo?</p>
</div>
CSS
#menu{
position: absolute;
left: -100%;
background-color:red;
width: 100%;
min-height: 100%;
z-index: 1000;
padding-top: 50px;
}
#burger-icon {
position:fixed;
top: 10px;
left: 10px;
color: yellow;
cursor: pointer;
z-index: 2000;
}
#content-wrapper {
padding-top: 40px;
background-color: #000;
color: #fff;
min-height: 200vh;
}
JS
var isOpen = false;
// sets the about off screen number
var aboutOffPosition = $("#menu").css("left");
//console.log($("#about").css("left"));
function openMenu() {
// console.log("burger clicked");
if(isOpen === false)
{
// slide over the about section
TweenMax.to($("#menu"),".75", {left:0, ease: Power1.easeIn});
// move over the content
TweenMax.to($("#content-wrapper"),1, {x:500, ease: Power1.easeIn});
isOpen = true;
}
else{
// slide back the about section
TweenMax.to($("#menu"),".75", {left:aboutOffPosition, ease: Power1.easeIn});
// move back the content
TweenMax.to($("#content-wrapper"),".5", {x:0, ease: Power1.easeIn});
isOpen = false;
}
}
// burger icon
$('#burger-icon').click(openMenu);
Thanks!
As far as I can understand you want to disable scroll of content-wrapper when menu is open and at the same time scroll should be enable for menu.
you just need to remove min-height from the #content-wrapper and set overflow to hidden to hide the scroll.
#content-wrapper {
padding-top: 40px;
background-color: #000;
color: #fff;
overflow:hidden;
}
#menu{
position: absolute;
left: -100%;
background-color:red;
width: 100%;
height: auto;
z-index: 1000;
padding-top: 50px;
}
I was able to fix this by adding a container(.app) around the content and applying this css to the project.
body {
// scroll fix
height: 100%;
overflow: hidden;
// end scroll fix
}
.app {
// scroll fix
overflow-y: scroll;
height: 100vh;
// end scroll fix
}
#about {
height: 100vh;
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
}
I updated the codepen to reflect these changes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.