スティッキー

Question

が動作していない私は最初のdivのGoogleチャートは第二のdivは、CSSは、ザを有するIFRAME

をロード第DIV続くだけオーバーレイであるHREF

で追加された3つのdivを有します3番目のdivはアブソリュートの位置にあり、うまく動作しますが、スクロールすると画面に残りません。スティッキーする第三のdivの位置を設定した場合、第2の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

の下でグレー表示画面の下部に座って、それはあなたが、私が理解しachiveしようとしている。これは?? ？

DEMO

編集： I位置に固定し、かつ左、右、上、下に使用0、自動ようにマージンを追加しています。これは、私が画面の中央にdivを取ることができます。あなたが絶対を使用する場合、それはスクロールしている間に消えますが、スクロールしても固定されています。