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

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

请参阅此fiddle

<强>更新

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>

在行动here

中查看

Answer 2

这是一个小提琴 http://jsfiddle.net/TSfLu/

左上方的消息将始终位于该位置并覆盖其下方的任何内容。因此，您可能希望相应地在页面上放置内容。

始终在区域内的顶部div

2 个答案: