How to keep an element fixed top within another element?

Question

Here is the jsfiddle and 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>

and 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;
}

How to keep .blur element fixed top within .wrapper element when I scroll .content element? I think jquery scrollTop might be a solution. Could anyone tell me how to do this?

possible duplicate of [position fixed header in html](http://stackoverflow.com/questions/10975268/position-fixed-header-in-html) — tutuDajuju, Mar 17 '15 at 08:22
Moving `overflow-y: auto;` style to `content` should help. If your html/style is a bit more complicated than example, you may need to add another wrapper between `wrapper` and `content`. — Frax, Mar 17 '15 at 08:25
no, the example you showed me is fixed relevant to the root element. what I want is fixed relevant its parent element. — SPG, Mar 17 '15 at 08:25

score 0 · Answer 1 · answered Mar 17 '15 at 08:27

0

Well, if the position of your "content" is set and always the same I would wrap your blur in a fixed container like this:

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

FIDDLE

answered Mar 17 '15 at 08:27

Alvaro Menéndez

8,766
3
37
57

score -1 · Accepted Answer · answered Mar 17 '15 at 08:37

I think I figure it out by jQuery and it works perfectly.

$(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>

How to keep an element fixed top within another element?

2 Answers2