Fix position element on scroll and remove when reaches the end of parent

Question

I have similar problem with this question

And here's the jsfiddle that I'm following to .

The only problem I have is the sticky element should not be fixed position by default, unlike the one on the jsfiddle.

#theFixed {
 background-color:red;
 border: solid;
 position:fixed;
 top:250px;
}

I want to achieve similar effect like this site . So when you scroll the left side of the page is fixed and when it reaches the end of the parent element, it goes back to it's original state.

David Chelliah · Answer 1 · 2016-06-06T21:59:29.927

I have modified the reference code to have the initial position set as position:absolute - not sure if this is ok your requirement.

Once it reaches a trigger point, it is set to position fixed.

When you scroll back to the top, while going below the trigger point the position is again set to "absolute"

var triggerPoint = 250;
var fixeddiv =$("#theFixed");
$(window).scroll(function() {
  var scroll_top = $(this).scrollTop(); // get scroll position top
  if (scroll_top < triggerPoint) {
    fixeddiv.removeClass("fix").removeAttr("style");
    return;
  }
  fixeddiv.addClass("fix");
  var height_element_parent = fixeddiv.parent().outerHeight(); //get high parent element
  var height_element = fixeddiv.height(); //get high of elemeneto
  var position_fixed_max = height_element_parent - height_element; // get the maximum position of the elemen
  var position_fixed = scroll_top < 250 ? 250 - scroll_top : position_fixed_max > scroll_top ? 0 : position_fixed_max - scroll_top;
  fixeddiv.css("top", position_fixed);
});

#fixed-parent {
  border: solid;
  position: relative;
}

#theFixed {
  background-color: red;
  border: solid;
  top: 250px;
  position: absolute;
}

#theFixed.fix {
  position: fixed;
}

#footer {
  background: url(http://1.bp.blogspot.com/-tMcpeIB_gNI/T4ma2zDt6yI/AAAAAAAAZro/eWDLUPsVr3Q/s640/Homero-Simpson_The-Simpsons_05.jpg);
  height: 400px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed-parent">
  <div id="theFixed">0 SOMETHING
    <br />1 SOMETHING
    <br />2 SOMETHING
    <br />3 SOMETHING
    <br />4 SOMETHING
    <br />5 SOMETHING
    <br />6 SOMETHING
    <br />7 SOMETHING
    <br />8 SOMETHING
    <br />9 SOMETHING
    <br />10 SOMETHING
    <br />11 SOMETHING
    <br />12 SOMETHING
    <br />13 SOMETHING
    <br />14 SOMETHING
    <br />15 SOMETHING
    <br />16 SOMETHING
    <br />17 SOMETHING
    <br />18 SOMETHING
    <br />19 SOMETHING
    <br />20 SOMETHING
    <br />21 SOMETHING
    <br />22 SOMETHING
    <br />23 SOMETHING
    <br />24 SOMETHING
    <br />25 SOMETHING
    <br />26 SOMETHING
    <br />27 SOMETHING
    <br />28 SOMETHING
    <br />29 SOMETHING
    <br />
  </div>

  THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
  <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS</div>
<div id="footer"></div>

If you are ready to try out a plugin, then check http://leafo.net/sticky-kit/ This will really suite your requirement.

Thanks for the help, but there should be no fix position value as well as triggerPoint. The element will be fixed position once it touches the top of the document and will go back to it's original state when the document reaches the end of it's parent. Just like here http://melaniedaveid.com/ — xknozi, Jun 06 '16 at 21:37
I have tried a lot of jquery plugins like StickyScroll, jQuery Pin, jquery sticky, but they all fail when you add height on the sticky element. — xknozi, Jun 06 '16 at 21:39
The referenced site too uses the position:fixed... It makes the DIV fixed to keep it within the view. — David Chelliah, Jun 06 '16 at 21:57
@jeponkz check the plugin mentioned in my answer, it might suite your case well. — David Chelliah, Jun 06 '16 at 22:00
I have already tried the plugin. When I try to add height to the sticky element, it doesn't work. The column should be in equal height, it worked when you don't add height to the sticky element. — xknozi, Jun 06 '16 at 22:10

score 1 · Answer 2 · answered Jun 06 '16 at 21:22

1

I think Scroll Magic will be useful.

answered Jun 06 '16 at 21:22

ciurciurek

112
1
8

Fix position element on scroll and remove when reaches the end of parent

2 Answers2