CODEWITHSUNDEEP
css
lawx
lawx

Reputation: 388

Overlay doesn't cover overflow:scroll; Modal isn't fixed

Demo: http://jsbin.com/zijisaxoke/1/edit?html,css,output

I have a scrollable container with a content div inside of it (assume variable width of the content div). However, the container has a fixed width of 100% (could also change).

I also have a modal, which has an absolute-positioned grey overlay. My goal is make the grey overlay cover the entire scrollable content of the container, but right now it only covers the initial viewport size. I'd also like to make the modal itself fixed to the left-top side of the container, regardless of scroll position, but it seems position: fixed doesn't respect the parent's position: relative.

.container {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: red;
  overflow: scroll;
}
.content {
  width: 2000px;
  height: 300px;
}
.overlay {
  z-index: 200;
  position: absolute;
  opacity: 0.7;
  top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #000;
}
.modal {
  z-index: 500;
  position: fixed;
  width: 300px;
  background-color: green;
  top: 0;
  left: 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="stuff">hi</div>
  <div class="container">
    <div class="content">aaa</div>
    <div class="overlay"></div>
    <div class="modal">Hello</div>
  </div>
</body>
</html>

How can I keep the modal fixed relatively inside of the container, and keep the overlay covering the entire scrollable area of the div?

Upvotes: 0

Views: 654

Answers (1)

Simon Jentsch
Simon Jentsch

Reputation: 717

Here is a JS solution:

$('.container').on('scroll', function() {
  var scrollTop = $(this).scrollTop();
  $('.overlay').css('top', scrollTop);
  $('.overlay').css('bottom', -scrollTop);
});

and the corresponding JS Bin: http://jsbin.com/xahehodeqe/3/edit?html,css,js,console,output

Upvotes: 1

Related Questions