親コンテナとの相対的な位置を固定したdiv

Question

右サイドバーに固定して親コンテナを基準にしてdivを追加したいのですが、これはちょうどこれのようにwebsite右サイドバーを参照してください。

私は多くのことを試してみましたが、ここで任意の結果を持っていない私のコードは、私は、CSSでこれを行うことができますどのようにクロスブラウザであり、それはCSSで可能でない場合はどのように私はjQueryのでこれを行うことができます

<div id="parent_div"> 
<div id="fixed_div"> 
    Some Content here..... 
</div> 
</div> 


parent_div 
{ 
float:right; 
width:300px; 
margin-top:50px; 
margin-right:5px; 
position:relative; 
border:1px solid red; 
} 

fixed_div 
{ 
position:fixed; 
width:300px; 
background-color:#084B8A; 
padding:10px; 
box-sizing:border-box; 
} 

ですまたはjavascript

Answer 1

jquery scrollTopを使用してください。以下のコードをご覧ください。

$(window).scroll(function(){ 
 
    $("#theFixed").css("top",Math.max(0,250-$(this).scrollTop())); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="theFixed" style="position:fixed;top:250px;right:30px;background-color:red">Fixed Div</div> 
 

 
CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>CONTENT <BR>

Answer 2

あなたは位置を使用することができます：スティッキーを。

か、他の機能

$(window).on("scroll", function() { 
    if($(window).scrollTop() > 50) { 
     $(".sidebar").addClass("active"); 
    } else { 
     //remove the background property so it comes transparent again (defined in your css) 
     $(".sidebar").removeClass("active"); 
    } 
});