始终在区域

内顶格我创建了一个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  | 
|        | 
|        |

当你向下滚动我想左上是在屏幕的左上角容器标签内，像这样

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

如果有人能指引我正确的方向或告诉我如何通过解释来实现这一点，我会非常感激。感谢您提前帮助或阅读本文。

来源

2011-12-23 Quillion

您应该添加'javascript'标记，因为这当然不能在CSS中完成。 – Wex 2011-12-23 21:28:27

好的，你最初需要在容器左上角的元素，但是当你开始滚动时，你想修复它到屏幕的左上角？ – Purag 2011-12-23 21:29:27

@Purmou我希望它保持在容器内的左上角。我非常想要这样的http://papermashup.com/只在一个特定的div标签内。 – Quillion 2011-12-23 21:33:01

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

看到这个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

来源

2011-12-23 21:29:35

这与我一直在得到的效果完全相同。看到的问题是，我希望当你向下滚动页面和容器的顶部部分消失，然后“左上角的东西”到屏幕的顶部 – Quillion 2011-12-23 21:40:14

在这种情况下，你将需要一些JavaScript。 – 2011-12-23 21:50:06

非常感谢你，这正是我所期待的。我不知道我可以使用JavaScript来做到这一点。非常感谢您的宝贵经验！ – Quillion 2011-12-28 14:26:34

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

左上角留言将始终在该位置并覆盖其下的任何内容。因此，您可能需要相应地在网页上放置内容。

来源

2011-12-23 21:49:03 Virendra

糟糕的是Jon P已经发布了类似的解决方案。 – Virendra 2011-12-23 21:52:17

回答

相关问题