Here's a fiddle with code to see show what I have so far: /

What I would like to have happen when user clicks "toggle drawer"

1. Original content (heading + etc.) fades to black, and user can no longer scroll this content
2. New content via drawer pulls out from right side
3. This new content has its own scroll, where there's a fixed final row at the bottom

What is currently happening/ wrong with each step:

1. Content fades to black achieved by a table overlaid over content. However, this content is still scrollable (despite that I tried to set css overflow, hidden); which means that you can scroll away the black overlay
2. Drawer pulls out successfully, but the mechanism is a bit funky... click toggle drawer again and you'll see that the drawer pulls out more and then pulls in. Furthermore, on neither pull out/in is it as smooth as jQuery UI's documentation shows
3. New content does NOT have its own scroll. Fixed final row is obscuring a bit of the contents of the drawer

Here's a fiddle with code to see show what I have so far: https://jsfiddle/gsnfzn35/1/

What I would like to have happen when user clicks "toggle drawer"

1. Original content (heading + etc.) fades to black, and user can no longer scroll this content
2. New content via drawer pulls out from right side
3. This new content has its own scroll, where there's a fixed final row at the bottom

What is currently happening/ wrong with each step:

1. Content fades to black achieved by a table overlaid over content. However, this content is still scrollable (despite that I tried to set css overflow, hidden); which means that you can scroll away the black overlay
2. Drawer pulls out successfully, but the mechanism is a bit funky... click toggle drawer again and you'll see that the drawer pulls out more and then pulls in. Furthermore, on neither pull out/in is it as smooth as jQuery UI's documentation shows
3. New content does NOT have its own scroll. Fixed final row is obscuring a bit of the contents of the drawer

• javascript
• jquery
• html
• css
• twitter-bootstrap-3

5 Answers 5

I think I've acplished a majority of what you're trying to achieve, a couple of notes:

1. Use direction on jquery slide to make it pop out from right: $(".scroll").toggle("slide", {direction:'right'});
2. For overflow: hidden; to work, you need to set a height for the element.

The rest of the changes you can see here: https://jsfiddle/gsnfzn35/2/

It includes:

• Slide out from right
• Dim layover and no scrolling on background content
• Scrolling with a fixed footer on the slide out content

I think you should be able to make all the necessary small changes from here.

You can do this with CSS transitions and just use jQuery to fire the opening/closing of the menu. Here is a fiddle showing it in action:

https://jsfiddle/NewNine/2jpzj9vw/

In this example, any element with the class .nav-toggle will toggle the menu open/close, which fires the very smooth CSS transitions to open/close the menu and bring up the overlay.

Using z-index, you can control which elements appear over/under the overlay. Because it all reacts to a class on the body tag, you can also set overflow: hidden; on the body tag when the menu is open which prevents the site from scrolling.

The drawer responds to the height of anything you put in it, which means it will scroll if you add content beyond the height of the browser - no additional code or explicit height setting required.

Solution is here. @smrubin is right but something is missing. Overlay is still not fixed. So, When we scroll down and click on the toggle button overlay is not visible of large content. The reason is that overlay has position: absolute. It should be position: fixed

Check the code below:

$("#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'
  });

})

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

<link href="//maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery./jquery-1.12.2.min.js"></script>
<script src="https://code.jquery./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>

If you're not married to jQuery, Polymer gives you a really easy element for handling exactly this:

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

By using this or Angular, you can easily make these kind of elements as native HTML.

Here is my working solution

https://jsfiddle/AldoRomo88/eLurjz37/1/

I’m using velicityjs for animations. Please check these three points

• Showing/hiding a semitransparent div to block main container changing its opacity and display properties
• Changing body’s overflow to prevent scrolling on main container
• Changing value of right drawer’s property to make it appear from right to left.

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