0

我正在构建一个画布外推送菜单，一切正常，有几个方面我似乎无法弄清楚。

  1. 如何禁用内容包装器的滚动。

  2. 如何仅滚动关闭画布菜单。现在它滚动网站本身的高度。

这是一个代码笔，可以向您展示我遇到的问题。

代码笔演示

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);

谢谢！

4

2 回答 2

0

据我所知，您想在菜单打开时禁用内容包装器的滚动，同时应该为菜单启用滚动。

您只需要从 #content-wrapper 中删除 min-height 并将溢出设置为隐藏即可隐藏滚动。

#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;
}
于 2016-05-22T08:15:30.297 回答
0

我可以通过在内容周围添加一个容器（.app）并将这个 css 应用到项目中来解决这个问题。

    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;
}

我更新了 codepen 以反映这些变化。

于 2016-05-22T13:14:16.067 回答