Question

以下是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可能是一个解决方案。谁能告诉我怎么做？

Answer 1

好吧，如果您的内容＆＃34;内容＆＃34;设置并始终相同我将你的模糊包装在一个固定的容器中，如下所示：

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

<强> FIDDLE

Answer 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>

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

2 个答案: