始終在區域內的頂部div

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 id="topLeft">
    Top Left
</div>

但我也有一個叫做容器的div。 我希望topLeft留在該容器的左上角而不是屏幕的左上角。 我對css很陌生，一直在摸索如何實現這樣的效果。

所以為了更清楚地解釋，我想嘗試達到這個效果

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

當你向下滾動時，我希望topleft在容器選項卡中位於屏幕的左上角，就像這樣

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

如果有人能指出我正確的方向或告訴我如何通過解釋實現這一點，我將非常感激。 感謝任何人提前幫助或只是閱讀這篇文章。

Answer 1

只需添加位置：相對於容器元素。

看到這個小提琴

更新

jQuery在這里非常有用。 您可以使用它輕松計算“容器”何時到達視圖端口的頂部，然后將類重新分配給“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

這是一個小提琴http://jsfiddle.net/TSfLu/

左上方的消息將始終位於該位置並覆蓋其下方的任何內容。 因此，您可能希望相應地在頁面上定位內容。