总是在区域内的顶部 [英] Always on top div within area

问题描述

我创建了一个总是位于顶部的div。

  .visibleDiv，#topLeft 
 {
位置：固定; 
 width：150px; 
 border：solid 1px＃e1e1e1; 
 vertical-align：middle; 
 background：＃ffdab9; 
 text-align：center; 
} 
 
 #topLeft 
 {
 top：10px; 
 left：10px; 
} 
  

这样显示

 < div id =topLeft> 
左上角
< / div> 
  

但我也有一个div叫容器。我想让topLeft留在该容器的左上角，而不是屏幕的左上角。我对css很新，已经抓了我的头一会儿如何实现这样的效果。

为了更清楚地解释我想尝试实现此效果

  ______________ 
 | 
 | ____________ | 
 ________________________________ 
 |顶部信息| | 
 | _________________ | | 
 | | 
 | | 
 | CONTAINER DIV | 
 | | 
 | | 
  

当你向下滚动我想要topleft在屏幕的左上角

  | __________________ | 
 |顶部信息| | 
 | _________________ | | 
 | | 
 | | 
 | CONTAINER DIV | 
 | | 
 | | 
 | ______________________________ | 
  

如果任何人可以指向正确的方向或告诉我如何实现，真的很感激。感谢任何人提前帮助或只是阅读这篇文章。

解决方案

只需添加position： / p>

查看此小提琴

更新

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

HTML

 < div class =head> 
一些东西
< / 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> 
<！ - 接线我们的魔法 - > 
< script type ='text / javascript'> 
 $（window）.load（function（）{
 $（window）.scroll（function（）{
 if -  $（window）.scrollTop（））< = 0）
 {
 $（＃topLeft）。addClass（fixit）; 
} 
 else 
 {
 $（＃topLeft）。removeClass（fixit）; 
} 
 
}）; 
} 
 
< / script> 
  

查看此操作 here

I created a div that is always on top

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

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

And I display it like so

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

But I also have a div called container. And i would like topLeft to stay at the top left within that container instead of the top left of the screen. I am quite new to css and have been scratching my head for a while on how to achieve such an effect.

So to explain more clearly I would like to try to achieve this effect

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

And when you scroll down I want the topleft to be at top left of screen within container tab like so

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

If anyone could point me in right direction or show me how to achieve that with an explanation I would be really grateful. Thank you to anyone in advance for helping or just reading this post.

解决方案

Simply add position:relative to your container element.

See this fiddle

Update

jQuery is very useful here. You can use it to easily calculate when the "container" hits this top of the view port then re-assign a class to your "topLeft" element to fix it.

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>

See it in action here

这篇关于总是在区域内的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！