は必ずエリア

Question

内トップのdivに私は

.visibleDiv, #topLeft 
{ 
    position: fixed; 
    width: 150px; 
    border: solid 1px #e1e1e1; 
    vertical-align: middle; 
    background: #ffdab9; 
    text-align: center; 
} 

#topLeft 
{ 
    top: 10px; 
    left: 10px; 
} 

トップ

に常にあるdiv要素を作成し、私はそう

<div id="topLeft"> 
    Top Left 
</div> 

のようにそれを表示するしかし、私はまた、コンテナと呼ばれるdiv要素を持っています。そして、私は画面の左上の代わりにそのコンテナ内の左上にとどまるようにtopLeftをしたいと思います。私はCSSにかなり新しいですし、そのような効果を達成する方法について私の頭をしばらく掻いてきました。

だから、より明確に説明するために、私は

______________ 
|Other things| 
|____________| 
________________________________ 
| TOP LEFT MESSAGE|   | 
|_________________|   | 
|        | 
|        | 
|   CONTAINER DIV  | 
|        | 
|        | 

この効果を達成するために試してみたいとあなたは下にスクロールするとき、私はTOPLEFTはそう

|__________________   | 
| TOP LEFT MESSAGE|   | 
|_________________|   | 
|        | 
|        | 
|   CONTAINER DIV  | 
|        | 
|        | 
|______________________________| 

のようなコンテナのタブの中に、画面の左上になりたいです

誰かが正しい方向に私を指すことができたり、それを達成する方法を私に説明してもらえれば、本当に感謝します。この投稿を読んだり読んだりしてくれてありがとうございます。

Answer 1

位置をコンテナ要素に相対的に単に追加します。

jQueryこのfiddle

更新を参照してくださいここでは非常に便利です。 「コンテナ」がビューポートのこの上部に当たるタイミングを簡単に計算し、「topLeft」要素にクラスを再割り当てして修正することができます。

HTML

<div class="head"> 
Some Stuff 
</div> 
<div class="container"> 
    <div id="topLeft">Top Left Stuff</div> 
    Container Stuff 
</div> 

CSS

.container 
{ 

    background-color:#FAA; 
    height:1000px; 
} 

#topLeft 
{ 
    width: 150px; 
    border: solid 1px #e1e1e1; 
    vertical-align: middle; 
    background: #ffdab9; 
    text-align: center; 
} 

.fixit 
{ 
    position:fixed; 

    top: 0px; 
} 

Javascriptを

<!-- Include jQuery Library --> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
<!-- Wire Up Our Magic --> 
<script type='text/javascript'> 
$(window).load(function(){ 
$(window).scroll(function() { 
    if(($(".container").position().top - $(window).scrollTop()) <= 0) 
     { 
      $("#topLeft").addClass("fixit"); 
     } 
     else 
     { 
      $("#topLeft").removeClass("fixit"); 
     } 

    }); 
}); 

</script> 

ここ

Answer 2

アクションhereでそれを参照してください。フィドル です

左上のメッセージは常にその位置にあり、その下のものはすべてカバーします。そのため、コンテンツをページに適切に配置することができます。