Stick A Div With Sticky-kit And Release It In An Specific Point In Angularjs

I have a webpage with two columns. I want to stick a div in the left column until the user scrolls down to an specific end of an element in the right column. I´m trying to use th

Solution 1:

There are three problems with the code. First of all, considering you are using floats, you need to add an element with clear property at the end of the #release-sticky (or use a css clearfix). So basically something like:

<divid="release-sticky"class="container">
  ...contents...
  <divstyle="clear: both"></div></div>

The reason behind this is that when you use floats, and don't clear afterwards, the browser doesnt allocate height for the parent. (so basically your #release-sticky has 0 height).

Secondly, there appears to be some kind of error when using the bottoming option. Removing it seems to fix the problems :)

Lastly, there is no need for $(document).ready() since, as AngularJS docs state:

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete'.

Also, i changed the element that had sticky class but just for display purposes, it works just as well if you revert the change (it just has no border then).

Plunk: https://plnkr.co/edit/h3ws1pckAHxk9T0JlnMJ?p=preview