让div粘到另一个绝对定位的顶部滚动div

这里是东西，有一个div .page它绝对定位在tha页面。里面有一个.container div，容器内有.content。让div粘到另一个绝对定位的顶部滚动div

.page有一定的高度，所以内容会滚动到.page的内部。在这种情况下，我想要一个.stuck div粘到.page的顶部。（我相信我做上面的语法错误！）

反正fiddel：

更新：我希望.stuck在的.page顶部上固定不考虑滚动.page。

这是布局：

<div class="page"> 
    <div class="container"> 
     <div class="content"></div> 
     <div class="stuck"></div> 
    </div> 
</div>

和我（不工作）CSS：

.page{ 
    position: absolute; 
    top:50px; 
    left:200px; 
    width:200px; 
    height:300px; 
    overflow:auto; 
} 
.container{ 
    position:relative; 
} 
.stuck{ 
    position: absolute; 
    top:0; 
    right:0; 
    left:0; 
    height:50px; 
    background:blue; 
} 
.content{ 
    height:700px; 
    background:gray; 
}

我想蓝色.stuck DIV 总是存在在.page div的顶部。任何帮助？

更新： 注：一个快速的把戏可能使.stuck是positions:fixed和.page的相同位置和宽度，但是这不是我的answere自.page的坐标可能与JS随时更改。

来源

2013-11-02 Alireza

你的意思是你想要的.stuck将出现（观众）在页面的顶部，而不管.page上的滚动？ – TreeTree

@TreeTree：就像你说的那样完全一样！ – Alireza

我不认为有可能将一个元素的位置固定到除了没有javascript/jquery的屏幕上。 – TreeTree

您可以将.page和.stuck添加到共同的父元素并将其叠加在另一个元素上。

http://jsfiddle.net/YBAvb/1/

.page_holder{ 
 
     position: absolute; 
 
     top:50px; 
 
     left:200px; 
 
     width:200px; 
 
     height:300px; 
 
    } 
 
    .page { 
 
     position: absolute; 
 
     top:0; 
 
     left:0; 
 
     width:200px; 
 
     height:300px; 
 
     overflow:auto; 
 
     z-index: 1; 
 
    } 
 
    .container { 
 
     position:relative; 
 
    } 
 
    .stuck { 
 
     position: absolute; 
 
     top:0; 
 
     right:0; 
 
     left:0; 
 
     height:50px; 
 
     background:blue; 
 
     margin-right: 18px; 
 
     z-index: 2; 
 
    }

<div class="page_holder"> 
 
     <div class="stuck"></div> 
 
     <div class="page"> 
 
      <div class="container"> 
 
       <div class="content"></div> 
 
      </div> 
 
     </div> 
 
    </div>

来源

2013-11-02 16:08:06

好的解决方案，但问题出现在容器内的'.stuck'。我不能在真实情况下展示它。其实它会像导航一样。它处于内容的中间，但它一直滚动到顶部。 – Alireza

以来。第坐标可能与JS随时更改。

...所以你已经使用JS！ :)

使用这个确切的HTML标记是不可能
对于这样的情况下，我们总是有Javascript和jQuery的：JSBIN DEMO

$('.stuck').each(function(){ 

    var $that = $(this), 
     $page = $that.closest('.page'); 

    $page.scroll(function(){  
    $that.css({top: this.scrollTop}); 
    }); 

});

来源

2013-11-02 16:13:06

似乎是这样，它可以用JS完成。那微笑告诉很多！ – Alireza

让div粘到另一个绝对定位的顶部滚动div

回答

相关问题