如何在内容上构建抽屉式抽屉

Question

这里有一个代码，可以看看到目前为止显示的内容：https://jsfiddle.net/gsnfzn35/1/

当用户点击＆＃34;切换抽屉＆＃34;

时，我希望发生什么

1. 原始内容（标题+等）淡化为黑色，用户无法再滚动此内容
2. 通过抽屉的新内容从右侧拉出
3. 这个新内容有自己的滚动条，底部有一个固定的最后一行

每个步骤目前发生/错误的原因是什么：

1. 内容会因覆盖内容的表格而变为黑色。但是，此内容仍可滚动（尽管我尝试设置css overflow，hidden）;这意味着您可以滚动黑色叠加层
2. 抽屉拉出成功，但机制有点时髦......再次点击切换抽屉，你会看到抽屉拉出更多然后拉出来。此外，既没有拉出/拉出它是和jQuery UI的文档显示一样顺利
3. 新内容没有自己的滚动条。固定的最后一行模糊了抽屉的一些内容

Answer 1

我认为我已经完成了你想要达到的大部分内容，有几个注意事项：

1. 使用jquery幻灯片上的方向使其从右侧弹出：$(".scroll").toggle("slide", {direction:'right'});
2. 要使overflow: hidden;生效，您需要为元素设置高度。

您可以在此处看到其他更改：https://jsfiddle.net/gsnfzn35/2/

它包括：

• 从右侧滑出
• 昏暗停留，不滚动背景内容
• 使用固定页脚滚动滚出内容

我认为你应该可以从这里做出所有必要的小改动。

Answer 2

您可以使用CSS过渡执行此操作，只需使用jQuery即可启动菜单的打开/关闭。这是一个显示它在行动的小提琴：

https://jsfiddle.net/NewNine/2jpzj9vw/

在此示例中，任何具有类.nav-toggle的元素都会切换菜单打开/关闭，这会触发非常平滑的CSS过渡以打开/关闭菜单并调出叠加层。

使用z-index，您可以控制在叠加层上方/下方显示哪些元素。因为它都对body标签上的类做出反应，所以当菜单打开时，你也可以在body标签上设置overflow: hidden;，这会阻止网站滚动。

抽屉会响应您放入其中的任何内容的高度，这意味着如果您添加超出浏览器高度的内容，它将滚动 - 无需其他代码或明确的高度设置。

Answer 3

如果您没有与jQuery结婚，那么Polymer为您提供了一个非常简单的元素来处理这个：

https://elements.polymer-project.org/elements/paper-drawer-panel?view=demo:demo/index.html&active=paper-drawer-panel

通过使用此或Angular，您可以轻松地将这些元素设置为本机HTML。

Answer 4

这是我的工作解决方案

https://jsfiddle.net/AldoRomo88/eLurjz37/1/

我正在使用velicityjs进行动画制作。 请检查这三点

• 显示/隐藏半透明div以阻止主容器更改 它的不透明度和显示属性
• 改变身体的溢出 防止在主容器上滚动
• 改变右抽屉的价值 使它从右到左显示的属性。

var isOpen = false;

$("#popout").click(function() {
  if (isOpen) {
    $('.opacityLayer').velocity('stop').velocity({opacity: 0}, {display: 'none'});
    $('body').css('overflow', 'auto');
    $('.drawer').velocity('stop').velocity({right: '-61%'});
  } else {
    $('.opacityLayer').velocity('stop').velocity({opacity: 0.4}, {display: 'block'});
    $('body').css('overflow', 'hidden');
    $('.drawer').velocity('stop').velocity({right: 0});
  }

  isOpen = !isOpen;
})

Answer 5

解决方案就在这里。 @smrubin是对的，但缺少一些东西。叠加仍然没有修复。因此，当我们向下滚动并单击切换按钮时，覆盖图对大内容不可见。原因是叠加层具有位置：绝对。它应该是位置：固定

检查以下代码：

＆＃13;

＆＃13;

$("#popout").click(function() {

  if ($('.fixed table').length == 0) {
    var width = window.innerWidth;
    var height = window.innerHeight;
    $('.fixed').append(
      $('<table style="width:' + width + 'px;height:' + height + 'px;background:rgba(0,0,0,0.5);z-index:50;position:fixed;top:0px;left:0px">' +
        '</table>').hide().fadeIn(100)
    )
    $(".fixed").css("overflow", "hidden");
  } else {
    $('.fixed table').fadeOut(100, function() {
      $(this).remove();
    });
    $(".fixed").css("overflow", "auto");
  }

  $(".scroll").toggle("slide", {
    direction: 'right'
  });

})

＆＃13;

html,
body {
  height: 100%;
  overflow: hidden;
}
.navbar {
  background-color: red;
  height: 70px;
}
.fixed {
  overflow: auto;
  width: 100%;
}
.fixed,
.scroll {
  position: absolute;
  margin-top: 70px;
  height: 100%;
  top: 0px;
}
.scroll {
  display: none;
  overflow: auto;
  z-index: 100;
  right: 0px;
  width: 33.33%;
  background-color: white;
}
.scroll-fixed-row {
  position: fixed;
  border-top: 1px solid black;
  bottom: 0px;
  background-color: white;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<nav class="navbar navbar-fixed-top">
  <button id="popout">
    Toggle drawer
  </button>
</nav>

<div class="container fixed">
  <div class="row">
    <div class="col-xs-12">
      <h1>
      Heading
      </h1>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
      <p>
        Lots of content
      </p>
    </div>
  </div>
</div>

<div class="container scroll">
  <div class="scroll-fluid-content">
    <h1>
          Peek a boo
          </h1>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
    <p>
      Lots of content
    </p>
  </div>
  <div class="scroll-fixed-row">
    <p>
      FIXED FINAL ROW
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;