粘性不工作

Question

我在那里被添加带有href

第一个div谷歌图表3周的div的第二个div只是一个叠加之后的第三格，它加载的iframe

的CSS拥有的第三格位置绝对正常，但滚动时不会保留在屏幕上。如果设置的第三格的位置，以不粘，坐落在第二个div覆盖

var btn1_Div = document.getElementById(itemId.itemID + "_div"); 
 

 
//Create and append button 
 
var btn1 = document.createElement("a"); 
 
var t = document.createTextNode("Bid Offer Data"); 
 
var classId = itemId.itemID 
 
btn1.appendChild(t); 
 
btn1.id = 'boddata'; 
 
btn1.setAttribute('class', classId); 
 
btn1.href = "BOD3.php"; 
 

 
btn1_Div.appendChild(btn1); 
 

 
$(document).ready(function() { 
 
    $(document).on('click', 'a', function(e) { 
 
    e.preventDefault(); 
 
    if ($(this).attr('id') == "boddata") { 
 
     var url = $(this).attr('href'); 
 
     var bumid = $(this).attr('class'); 
 
     $("#overlay_div").append('<iframe id="bod" width="100%" height="100%" frameborder="0" scrolling="yes" allowtransparency="true" src="' + url + '?bmu=' + bumid + '"></iframe>'); 
 
     $("#overlay").fadeIn("slow"); 
 
     $("#overlay_div").fadeIn("slow"); 
 
    }; 
 
    }) 
 
    $("#close_button").click(function() { 
 
    $("#bod").remove(); 
 
    $("#overlay").fadeOut("fast"); 
 
    $("#overlay_div").fadeOut("fast"); 
 

 
    }) 
 
});

#overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #f0f0f0; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    opacity: 0.9; 
 
    z-index: 1000; 
 
    display: none; 
 
} 
 

 
#overlay_div { 
 
    width: 600px; 
 
    height: 500px; 
 
    margin: 0 auto; 
 
    top: 80%; 
 
    right: 20%; 
 
    bottom: 80%; 
 
    left: 20%; 
 
    z-index: 1500; 
 
    box-shadow: 0 0 50px #000; 
 
    -o-box-shadow: 0 0 50px #000; 
 
    -moz-box-shadow: 0 0 50px #000; 
 
    -webkit-box-shadow: 0 0 50px #000; 
 
    -ms-box-shadow: 0 0 50px #000; 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="charts"></div> 
 

 
<div id="overlay"></div> 
 
<div id="overlay_div"> 
 
    <div id="close_button">x</div> 
 
</div>

Answer 1

下变灰屏幕的下方是它这个你正在尝试才达到我的理解？ ？

DEMO

编辑：我用固定为位置和与左，右，顶部，底部是0还添加余量为自动。这让我可以把div放到屏幕中间。如果使用绝对值，它会在滚动时消失，但即使您滚动，固定也会自行修复。