在可滾動的模式中的固定位置的div

Question

我有一個應該有相對於瀏覽器窗口的固定位置的滾動模式的div，並且不應該滾動模式。我試過position:fixed，但它不起作用。在這裏你可以看到問題在它的背景：

$('.launchConfirm').on('click', function (e) { 
 
    $('#confirm').modal({ 
 
     show: true 
 
    }); 
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<div class="page-container"> 
 
    <div class="container"> 
 
     <br /> 
 
     <button type="button" class="btn launchConfirm">Open modal</button> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="confirm"> 
 
    <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">Modal title</h4> 
 

 
      </div> 
 
      <div class="modal-body"> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <div style="position:fixed;top:40px;left:10px;background-color:red">This div should be fixed<br>and should not scroll away.</div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       some random buttons 
 
      </div> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

我怎麼能解決這個問題的div？

Answer 1

我設法解決基於由@Shiplo拉赫曼回答和@刪除模態頭Dejan.S

問題，把一切都放在模體和做這裏所描述的jQuery解決方法：jQuery: Fix div when browser scrolls to it

$('.launchConfirm').on('click', function (e) { 
 
    $('#confirm').modal({ 
 
     show: true 
 
    }); 
 
}); 
 

 
jQuery(function($) { 
 
    function fixDiv() { 
 
    var $cache = $('#getFixed'); 
 
    if ($('.modal-body').scrollTop() > 50) 
 
    { 
 
    $cache.css({ 
 
     'position': 'fixed', 
 
     'top': '0px', 
 
     'left': '25px', 
 
     'width': '600px' 
 
     }); 
 
    } 
 
    else 
 
     $cache.css({ 
 
     'position': 'relative', 
 
     'top': 'auto', 
 
     'left': '10px' 
 
     }); 
 
    } 
 
    $('.modal-body').scroll(fixDiv); 
 
    fixDiv(); 
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'); 
 
.modal-open .modal { 
 
    //overflow: hidden; 
 
} 
 
.modal-body { 
 
    height: calc(100vh - 126px); 
 
    overflow-y: scroll; 
 
} 
 
    
 
#getFixed { 
 
    position: relative; 
 
    left: 10px; 
 
    width: 600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 

 

 
<div class="page-container"> 
 
    <div class="container"> 
 
     <br /> 
 
     <button type="button" class="btn launchConfirm">Open modal</button> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="confirm"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-body" id="confirm2"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <h4 class="modal-title">Modal title</h4> 
 
       <div id="getFixed" style="background-color:red">This div should be fixed<br>and should not scroll away.</div> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       some random buttons 
 
      </div> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

這裏是源： http://jsfiddle.net/roahda03/21/

Answer 2

在模體，你應該設定一個最大高度，然後告訴溢出，因此：

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

Answer 3

您將需要移動DIV的模式之外。

固定定位與viewport相關，除了時，祖先元素應用transform。 .modal-dialog已將transform應用於它，它創建了一個定位DIV的新上下文（這就是爲什麼您的DIV停留在模態內）。

CSS Positioning - MDN

Answer 4

您可以使用這樣的。

$('.launchConfirm').on('click', function (e) { 
 
    $('#confirm').modal({ 
 
     show: true 
 
    }); 
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'); 
 
.modal-open .modal { 
 
    overflow: hidden; 
 
} 
 
.modal-body { 
 
    height: calc(100vh - 126px); 
 
    overflow-y:scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<div class="page-container"> 
 
    <div class="container"> 
 
     <br /> 
 
     <button type="button" class="btn launchConfirm">Open modal</button> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="confirm"> 
 
    <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">Modal title</h4> 
 

 
      </div> 
 
      <div class="modal-body"> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <div style="position:fixed;top:40px;left:10px;background-color:red">This div should be fixed<br>and should not scroll away.</div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       some random buttons 
 
      </div> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->