How to make a fixed but relative element relative to its parent only when scrolling?

advertisements

I have .container div that have some content and a hidden header, and this element also have overflow-Y: auto; property. I want to make the header fixed when the user scrolls down in .container to 100px approximately.

Here is my code:

.container {position: relative; border: 1px solid #ccc;  overflow-y: auto; height: 200px; margin-top: 50px; width: 500px;}
.to-be-fixed {position: absolute; top: 0px; left: 0px; height: 30px; text-align: center; font-family: Arial; padding: 0px 12px; background: red; width: 100%; line-height: 30px; margin-top: -30px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="to-be-fixed">
        Header to be fixed
    </div>
    <div class="content-holder">
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
        <p>content here..!</p>
    </div>
</div>

When I am not using margin-top: -30px; in header it is being shown...! Like this images:

I want that it should be display only when user scrolls down to view more content in container element like this image:

I have also used some jQuery to make it fixed but it is not working:

$(document).ready(function(){
var headerFixed = $('.to-be-fixed');
var headerFixedHolder = $('.container');
var heightScrolled = headerFixed .offset().top - headerFixedHolder .offset().top;
if (heightScrolled > 100) {
    $('.to-be-fixed').css('position', 'fixed');
}
});

Although I know css property in css() method will not work properly but I don't know what is to do...! Please help me..!


First, you don't have to use position:fixed on header. That would cause unnecessary problems. Keep the position:absolute and change only the top position

Also, to trigger this event you need to use a scroll() function linked to the element your are scrolling into ( in this case, container ) .

See snippet below

With this code , the top value of your header will be equal to the distance scrolled inside the .container . So it will always stay at top , giving the impression of fixed positioning. Then, when under 100px of scroll, top position becomes 0 so the header goes to top again.

var headerFixedHolder = $('.container');
$(headerFixedHolder).scroll(function() {
  var scrollTop = $(this).scrollTop(),
    headerFixed = $('.to-be-fixed');
  if (scrollTop > 100) {
    $(headerFixed).css({
      "top": scrollTop,
    }).show()
  } else {
    $(headerFixed).css({
      "top": 0
    }).hide()
  }
});
.container {
  position: relative;
  border: 1px solid #ccc;
  overflow-y: auto;
  height: 200px;
  margin-top: 50px;
  width: 500px;
}

.to-be-fixed {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 30px;
  text-align: center;
  font-family: Arial;
  padding: 0px 12px;
  background: red;
  width: 100%;
  display: none;
  line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="to-be-fixed">
    Header to be fixed
  </div>
  <div class="content-holder">
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
    <p>content here..!</p>
  </div>
</div>