Background of fixed position div extends beyond edge of pop-up - css

Question

I've created a scrollable pop-up that uses a jQuery plugin to hold the buttons in place at the top of the window as a user scrolls. This works except for one small problem...the white background that I have placed on the div containing the buttons (in order to prevent seeing the content scrolling beneath the buttons) is extending beyond the right edge of the pop-up. I've tried this in both Chrome and Firefox and they both do the same thing. Is there a CSS solution to this problem?
Here's my fiddle - http://jsfiddle.net/donnapep/NhmvH/2/
HTML
<div class="overlay"></div>
<div class="wrapper container modal-content">
<div>
<h1>Weather Settings</h1>
<div class="sticky-wrapper">
<div class="btn-toolbar sticky-buttons">
<button id="save" class="btn btn-primary" type="button">Save</button>
<button id="cancel" class="btn btn-primary" type="button">Cancel</button>
<button id="help" class="btn btn-primary" type="button">Help</button>
</div>
</div>
</div>
<form role="form">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label for="layout">Layout</label>
<div class="radio">
<input type="radio" name="layout" value="current" data-url="http://s3.amazonaws.com/Widget-Weather-Test/current.html" checked="checked">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-vertical.png" class="img-thumbnail">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-horizontal.png" class="img-thumbnail">
</div>
<div class="radio">
<input type="radio" name="layout" value="three-day" data-url="http://s3.amazonaws.com/Widget-Weather-Test/three-day.html">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/three-day-vertical.png" class="img-thumbnail">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/three-day-horizontal.png" class="img-thumbnail">
</div>
<div class="radio">
<input type="radio" name="layout" value="current-and-three-day" data-url="http://s3.amazonaws.com/Widget-Weather-Test/current-and-three-day.html" checked="checked">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-and-three-day-vertical.png" class="img-thumbnail">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-and-three-day-horizontal.png" class="img-thumbnail">
</div>
</div>
</div>
</div>
</form>
CSS
.overlay {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.wrapper {
z-index: 2;
width: 90%;
height: 500px;
margin: 20px auto 0;
overflow: auto;
}
.sticky-buttons {
z-index: 10;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #fff;
}
Javascript
$(document).ready(function () {
$(".sticky-buttons").sticky({
container: $(".wrapper"),
topSpacing: 21
});
});
Thx.

Answer 1

http://jsfiddle.net/4eAeA/
Looking at the docs for that plugin you can use getWidthFrom as an option argument.
$(document).ready(function () {
$(".sticky-buttons").sticky({
container: $(".wrapper"),
topSpacing: 21,
getWidthFrom : $(".wrapper")
});
});
#donnapep, a downside I saw from that plugin is that it does not keep the width in check on resize.
You will also need something like this :
var _stickybuttons = $(".sticky-buttons");
$(window).resize(function () {
_stickybuttons.sticky('update');
});

Answer 2

I changed your jquery to:
$(document).ready(function () {
$(".sticky-wrapper").sticky({
container: $(".wrapper"),
topSpacing: 21
});
});
Some position:absolute; to
.wrapper.container.modal-content
so that it does not extend to the right
and
width:100%;
z-index:20;
in .sticky-wrapper
Fiddle:
http://jsfiddle.net/NhmvH/9/
It moves to left now but you get the idea.
Dont know if by changing your plugin its easier but anyway I hope it helps a bit.