如何将一个元素固定在另一个元素中？答案

【问题标题】：How to keep an element fixed top within another element?如何将一个元素固定在另一个元素中？
【发布时间】：2015-05-19 14:17:53
【问题描述】：

这里是jsfiddle 和 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>

和 CSS：

.wrapper{
    position: relative;
    width: 300px;
    height: 100px;
    margin: 100px auto;
    background-color: #C0C0C0;
    overflow-x: hidden;
    overflow-y: auto;
}

.blur{
    width: 400px;
    height: 50px;
    position: absolute;
    background-color: #000000;
    -webkit-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px);
    left: -50px;
    top: -20px;
}

当我滚动 .content 元素时，如何将 .blur 元素固定在 .wrapper 元素中？我认为 jquery scrollTop 可能是一个解决方案。谁能告诉我该怎么做？

【问题讨论】：

position fixed header in html的可能重复
将 overflow-y: auto; 样式移动到 content 应该会有所帮助。如果您的 html/样式比示例复杂一点，您可能需要在 wrapper 和 content 之间添加另一个包装器。
不，您向我展示的示例与根元素相关。我想要的是固定相关的父元素。

标签： javascript jquery css

【解决方案1】：

好吧，如果您的“内容”的位置设置并且始终相同，我会将您的模糊包装在一个固定的容器中，如下所示：

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

FIDDLE

【讨论】：

【解决方案2】：

我想我是用 jQuery 搞定的，而且效果很好。

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

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

.wrapper{
    position: relative;
    width: 300px;
    height: 100px;
    margin: 100px auto;
    background-color: #C0C0C0;
    overflow-x: hidden;
    overflow-y: auto;
}

.blur{
    width: 400px;
    height: 50px;
    position: absolute;
    background-color: #000000;
    -webkit-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px);
    left: -50px;
    top: -20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

【讨论】：