Javascript 区域内始终处于顶部div

我创建了一个始终位于顶部的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>

当你向下滚动时，我希望左上角位于屏幕左上角的容器选项卡内，如下所示

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

---

如果有人能给我指出正确的方向，或者告诉我如何做到这一点，我会非常感激。提前感谢您的帮助或只是阅读本文。

只需添加位置：相对于容器元素

看到这个了吗

更新

它在这里非常有用。您可以使用它来轻松计算“容器”何时到达视图端口的顶部，然后将一个类重新分配给“topLeft”元素以修复它

HTML

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>

$（窗口）。加载（函数（）{
$（窗口）。滚动（函数（）{
如果（$（“.container”）.position（）.top-$（window.scrollTop（））这里有一把小提琴

左上角的消息将始终位于该位置，并覆盖其下方的任何内容。因此，您可能希望相应地在页面上定位内容。
您可能应该添加
javascript
标记，因为这当然不能仅用CSS来完成。好的，您最初希望元素位于其容器的左上角，但当您开始滚动，你想把它固定在屏幕的左上角吗？@Purmou我想让它固定在容器的左上角。我非常想在某个div标记中使用类似的东西。这与我一直得到的效果完全相同。问题是，当你向下滚动页面和容器的顶部时，我想要它r消失，然后“左上角的东西”出现在屏幕顶部，在这种情况下，您将需要一些javascript。非常感谢，这正是我所寻找的。我不知道我可以使用javascript来完成它。非常感谢上了一堂精彩的课！
<div class="head">
Some Stuff
</div>
<div class="container">
    <div id="topLeft">Top Left Stuff</div>
    Container Stuff
</div>

.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;
}

<!-- 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>