1

我无法让覆盖显示在另一个 div 的可见部分之上。问题是，容器 div 溢出了，如果用户在该 div 内滚动，则覆盖不会覆盖滚动部分。我的问题是：如何定位一个 div 以使用 jQuery 填充另一个 div 的可见部分 - 或者，有没有办法只使用 CSS 来完成这个？

这是一个 jsFiddle 演示，这是标记：

HTML

<div class="container">
    <div class="overlay"></div>
    <div class="content">
        <p>Content here</p>
        <p>Overflow content here</p>        
    </div>
</div>

CSS

div.container { position: absolute; height: 100px; width: 100px; overflow-y: auto; }
div.overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F00; opacity: 0.5; }
div.content p { margin-bottom: 100px; }

和 JS（在 DOM Ready 上加载）

$('div.container').click(function(){
    $('div.overlay').toggle();
});
4

3 回答 3

1

为了实现你所要求的，我做了以下

CSS

.container {
    /* setting this to relative means 
       overlay is positioned relative to its parent */
    position: relative; 
}
.overlay {
    /* element taken out of normal flow */
    position: absolute;
    /* removed bottom and right properties otherwise
       updating top property has no effect */
    height: 100px;
    /* When scrollbar appears width decreases to less than
       100px hence having to set to 100% to allow automatic calculation */
    width: 100%;
}

JavaScript

使用 jQuery，我现在适当地设置了 top 属性

$(".container").scroll( function( ) {
    $(".overlay").css({ top: $(this).scrollTop( ) });
});

在这里提琴

于 2013-01-03T22:45:21.857 回答
0

假设您真的只想覆盖可见部分：

http://jsfiddle.net/GNCaT/1/

<style type="text/css">
div.overlay { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height:100px; /* fixed height, set by CSS or javascript, no bottom */
    background: #F00; 
    opacity: 0.5; 
}
</style>

<script>
$('div.container').click(function(){
    $('div.overlay').css('top', $('div.container').scrollTop() + 'px').toggle();
});​
</script>

这会将叠加层定位到容器可见部分的顶部。

于 2013-01-03T22:48:53.837 回答
0

您可以使用 DOM 属性scrollHeight：

$('div.container').click(function(){
    $('div.overlay').css("height", this.scrollHeight).toggle();
});

http://jsfiddle.net/p6k2Z/1/

编辑 ：

为了只覆盖可见部分，您可以使用：

$('div.container').click(function(){
    $('div.overlay').css({
        top: this.scrollTop,
        height: $('div.container').css("height")})
    .toggle();
});

http://jsfiddle.net/p6k2Z/3/

于 2013-01-03T22:10:04.830 回答