Waypoint sticky does not work with Angular js Jquery passthrough

Question

I have been trying to use waypoint's sticky extenstion, through jquery passthrough in angular js. Jquery UI passthrough works in general, but I could not get the sticky working. Here is a jsfiddle of what I have tried so far.

http://jsfiddle.net/lilacsunbird/bC5ts/

html:

<h2 class="my-sticky-element" ui-jq="waypoint" ui-options="sticky">Sticky 

Controller:

  angular.module('waypoints', ['ui']);

/* Controllers */
function WaypointsController($scope) {


     $scope.sticky = 'sticky';


    $scope.test = function(){
        alert('You have scrolled to an entry.');
    }
}

Thanks a lot

Answer 1

According to the docs here, the sticky plugin just provides hooks for making things sticky but does not actually style them as so. It is left to you to decide how 'sticky' should look.

The fiddle is setting and unsetting the .stuck class, that indicates when an element is stuck, as it is supposed to. You just need apply the styling to it. A very simple example is:

.stuck {
    top: 0px;
    position: fixed;
}

An updated fiddle is here: http://jsfiddle.net/4Mt4K/1/