Javascript 如何将一个元素固定在另一个元素的顶部？

以下是文件和HTML：

<div class="wrapper">
    <div class="blur"></div>
    <div class="content">
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
    </div>
</div>

---

当我滚动.content元素时，如何将.blur元素固定在.wrapper元素的顶部？我认为jQueryScrollTop可能是一个解决方案。有人能告诉我怎么做吗？

好吧，如果你的“内容”的位置设置好了，并且始终保持不变，我会将你的模糊图像包装在一个固定的容器中，如下所示：

.container-blur {
    position:fixed;
    width:282px;
    top:100px;
    overflow:hidden;
    height:50px;
}

---

我想我通过jQuery找到了答案，而且它工作得非常完美

$(function(){
    $(".wrapper").scroll(function(){
        console.log($(this).scrollTop());
        $(".blur").css("top", (-20+$(this).scrollTop())+"px");
    });
});

$（函数（）{
$（“.wrapper”）.scroll（函数（）{
log（$（this.scrollTop（））；
$（“.blur”）.css（“top”，（-20+$（this.scrollTop（））+“px”）；
});
});
.wrapper{
位置：相对位置；
宽度：300px；
高度：100px；
保证金：100像素自动；
背景色：#C0；
溢出x：隐藏；
溢出y：自动；
}
.模糊{
宽度：400px；
高度：50px；
位置：绝对位置；
背景色：#000000；
-webkit过滤器：模糊（10px）；
-ms过滤器：模糊（10px）；
-o-滤波器：模糊（10px）；
-moz滤波器：模糊（10px）；
过滤器：模糊（10px）；
左：-50px；
顶部：-20px；
}

文本

文本

文本

文本

文本

文本

文本

文本

文本

移动的可能重复
溢出-y：自动样式到
内容
应该有帮助。如果您的html/样式比示例复杂一点，您可能需要在
wrapper
和
content
之间添加另一个包装。不，您展示的示例与根元素相关。我想要的是固定相关的父元素。
$(function(){
    $(".wrapper").scroll(function(){
        console.log($(this).scrollTop());
        $(".blur").css("top", (-20+$(this).scrollTop())+"px");
    });
});