Is it possible to have a fixed header inside a long modal with no scrollbars or fixed height on the modal?

Question

I'm trying to style a modal that has dynamic long heights which will need scrolling, but would like the scrollbars to be on the body, not inside the modal. The next part to this will be to have the header fixed, so that it's always visible while scrolling down the modal. I've been trying for a couple of days to find a solution, but no luck.
Any help is appreciated.

$('.launch-scroll').on('click', function(e) {
  $('#modal-scroll').modal({
    show: true
  });
});

.modal {
    overflow: hidden;
}
.modal .modal-body {
    height: 500px;
    overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="page-container">
  <div class="container">
    <br />
    <button type="button" class="btn launch-scroll">Launch Confirm</button>
  </div>
</div>
<div class="modal fade" id="modal-scroll">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h4 class="modal-title">Can a header be fixed, without modal scrollbars?</h4>

      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
            <p>Heaps of text to make this modal have heaps of height</p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 1

This is your CSS rule that needs a change:

.modal .modal-body {
    height: 500px;
    overflow: auto;
}

Remove the height:500px; and the modal will expand taller than the viewport giving its scrollbar to the <body> element.

Update: For a fixed header you can move the .modal-header element that is inside .modal-content to be just before .modal-dialogue. Then add padding-top: 60px; to the rule above and add the following rule for the header (Demo):

.modal-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 17px;
    z-index: 10;
    background: white;
}